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

Question

我在使用 jQuery Ui 可拖动元素时遇到了样式问题。 这就是我所拥有的

FIDDLE

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

这里是拖拽代码

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

我为持有li 的ul 提供了一个z-index，它高于下面列表中的li。

Answer 2

避免花招，使用 div 而不是 UL 或 LI 以获得进一步的兼容性。

此外，您无需监听 start 事件即可设置 z-index 属性。 .draggable() api 为此公开了zIndex prop。

Here is the demo working:

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