jQuery ui 可拖动元素位于其他可拖动元素之下

Question

jQuery Ui 可拖动元素存在样式问题。这是我的

如你所见，我有两个可放置区域，每个区域中的元素都是可拖动的，并且可以将元素从一个块拖放到另一个块这里唯一的问题是，当我将元素从顶部块拖动到下方块时，拖动的元素在可放置元素下，但是当我从底部拖动到顶部时，没有这样的问题。

这里是拖动的代码

$(".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"
});

谁能帮帮我，我已经工作了 2 天了，但不知道是什么问题，我尝试更改每个块的 z-index 位置，但没有结果；

Answer 1

我发现我的代码只在第一次工作 - 我从你的 JQuery 和你的 css 中删除了一些 z-indexes，现在它每次都对我有用：

http://jsfiddle.net/zbo7g5nz/5/

我的 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"
    });

我给了 ul 的 z-index，其中 li 高于下面列表的 li。

Answer 2

避免技巧并使用 div 而不是 UL 或 LI 以获得进一步的兼容性。

此外，您无需监听开始事件即可设置 z-index 属性。由于这个原因，.draggable() api 公开了 zIndex prop。

Here is the demo working:

http://jsfiddle.net/zbo7g5nz/8/

jQuery ui 可拖动元素位于其他可拖动元素之下

jQuery ui draggable element gets under other draggable elements

html

javascript

css

jquery

jquery-ui