jQuery ui draggable元素得到其他可拖動元素

Question

我有jQuery Ui可拖動元素的樣式問題。 在這里我有什么

小提琴

正如你所看到的，我有兩個可放置區域，每個區域中的元素都是可拖動的，並且可以將元素從一個塊拖放到另一個塊這里唯一的問題是，當我將元素從頂部塊拖動到下面的塊時，拖動元素得到droppable是元素，但當我從底部拖動到頂部沒有這樣的問題。

這是拖動的代碼

$(".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索引，現在它每次都適合我：

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

我給了一個z-index到ul其中li高於下面列表中的li 。

Answer 2

為了進一步兼容，請避免使用div而不是UL或LI。

此外，您無需偵聽start事件來設置z-index屬性。 由於這個原因，.draggable（）api公開了zIndex prop 。

Here is the demo working:

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