jQuery UI的 - 丟棄事件

Question

後，克隆可放開/排序列表基本上我有拖動的項目列表，最初一個投擲的元素他們被拖進。當一個物品被拖入可投放區時，該可投放物被克隆（在物品被添加之前）並作爲新的可投放區被追加。

在這個剝離下來小提琴看看：http://jsfiddle.net/DKBU9/1/（略排序（））

HTML

<ul id="draggables"> 

    <li>foo1</li> 
    <li>foo2</li> 
    <li>foo3</li> 

</ul> 

<ul class="droppable new"> 

</ul> 

JS

$('#draggables > li').draggable({ 
    appendTo: 'document', 
    revert: 'invalid' 
}); 

$('.droppable > li').draggable({ 
    appendTo: 'document', 
    revert: 'invalid' 
}); 

$('#draggables').droppable({ 
    accept: '.droppable > li', 
    drop: function(event, ui) { 
     ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this)); 
    } 
}); 

$('.droppable').droppable({ 
    accept: '#draggables > li', 
    drop: function(event, ui) { 
     if($(this).hasClass('new')) { 
      var clone = $(this).clone(true, true); 
      $(this).removeClass('new').after(clone); 
     } 
     ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));  
    } 
}); 

正如你所看到的，拖放作品爲最初的元素，但不保存在克隆中。我認爲clone(true, true)複製匹配和子元素及其事件處理程序。

我甚至試圖把上面的JS在功能和運行在下降事件的功能，但我什麼也沒得到。

最後，我希望能夠拖動和「池」列表和克隆的清單自身之間和克隆的列表之間的下降，以及克隆列表中的項目進行排序。

Answer 1

看看this fiddle。

您將需要重新設置droppable事件處理程序。我認爲克隆（真）（即有數據和事件）會讓事情有點混淆。看看this answer。具體做法是：

我覺得不是很安全的複製已應用插件 ，除非你是100％肯定的是，這樣的插件是一個元素 設計和編碼，可以使用支持多個DOM元素同樣的 插件實例。

在這種情況下，只需在克隆後添加droppable事件就簡單多了。

新功能：

function initDrop($element) 
{ 
    $element.droppable({ 
     accept: '#draggables > li', 
     drop: function(event, ui) { 
      if($(this).hasClass('new')) { 
       var clone = $(this).clone();     
       $(this).after(clone); 
       $(this).removeClass('new'); 
       initDrop(clone); 
      } 
      ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));  
     } 
    }); 
} 

也看看this question這也發現，克隆項目是不是可放開（如果看一下解決方法，以及它是對你有用）。