[英]jQuery ui draggable element gets under other draggable elements
I have a style problem with jQuery Ui draggable elements. 我有jQuery Ui可拖动元素的样式问题。 here what i have 在这里我有什么
As u can see, i have two droppable areas , in each area elements are draggable, and can drag and drop element from one block to another The only problem here , that when i am dragging element from top block to below block, the dragging element gets under droppable are elements, but when i am dragging from bottom are to top there is no such problem. 正如你所看到的,我有两个可放置区域,每个区域中的元素都是可拖动的,并且可以将元素从一个块拖放到另一个块这里唯一的问题是,当我将元素从顶部块拖动到下面的块时,拖动元素得到droppable是元素,但当我从底部拖动到顶部没有这样的问题。
Here is the code for dragging 这是拖动的代码
$(".slide").draggable({
// brings the item back to its place when dragging is over
revert:true,
// once the dragging starts, we decrease the opactiy of other items
// Appending a class as we do that with CSS
start: function(event, ui) { $(this).css("z-index", a++); },
drag:function () {
$(this).removeClass('droped');
},
// adding the CSS classes once dragging is over.
stop:function () {
$(this).addClass('droped');
},
zIndex: 10000,
snapMode: "inner"
});
Can anybody help me please, i am working on it already 2 days, and can't figure out what is the problem, i have tried to change z-index positions of every block, but no result; 任何人都可以帮助我,我已经工作了2天,并且无法弄清楚是什么问题,我试图改变每个块的z-index位置,但没有结果;
I found out that my code only worked the first time - i removed some z-indexes from your JQuery ánd your css, now it is working for me every time: 我发现我的代码只在第一次工作 - 我从你的JQuery和你的css中删除了一些z索引,现在它每次都适合我:
http://jsfiddle.net/zbo7g5nz/5/ http://jsfiddle.net/zbo7g5nz/5/
My jFiddle doesnt seem to get updated to share.. Here is working code: 我的jFiddle似乎没有得到更新分享..这是工作代码:
$(".slide").draggable({
// brings the item back to its place when dragging is over
revert:true,
// once the dragging starts, we decrease the opactiy of other items
// Appending a class as we do that with CSS
start: function(event, ui) { $(this).css("z-index", a++); },
drag:function () {
$(this).parent().css('z-index', '10001');
$(this).removeClass('droped');
},
// removing the CSS classes once dragging is over.
stop:function () {
$(this).parent().css('z-index', '10001');
$(this).addClass('droped');
},
zIndex: 10000,
snapMode: "inner"
});
I gave a z-index to the ul
holding the li
that was higher than the li
of the list that was below. 我给了一个z-index到ul
其中li
高于下面列表中的li
。
Avoid tricks and go with divs instead of UL or LI for further compatibility. 为了进一步兼容,请避免使用div而不是UL或LI。
Also, you don't need to listen to the start event to setup the z-index property. 此外,您无需侦听start事件来设置z-index属性。 The .draggable() api exposes the zIndex prop for that reason. 由于这个原因,.draggable()api公开了zIndex prop 。
Here is the demo working:
http://jsfiddle.net/zbo7g5nz/8/ http://jsfiddle.net/zbo7g5nz/8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.