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这也发现，克隆项目是不是可放开（如果看一下解决方法，以及它是对你有用）。