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-每個塊的索引位置，但沒有結果;

Answer 1

我發現我的代碼只工作的第一次 - 我刪除了您JQuery的一些Z-索引和你的CSS，現在它每一次爲我工作：

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來進一步兼容。

另外，您不需要偵聽啓動事件來設置z-index屬性。 .draggable（）api公開了zIndex prop。

Here is the demo working: 

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