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

Question

我对 jQuery Ui 可拖动元素有样式问题。这是我拥有的

FIDDLE

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

下面是拖动的代码

$(".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 天了，但无法弄清楚问题出在哪里，我尝试更改每个 block 的 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。