jQuery UI – drop事件后克隆droppable / sortable列表

基本上我有一个可拖动的项目列表，最初是一个可拖放的元素，可以将它们拖入。 将项目拖入droppable时，将克隆droppable（在附加项目之前）并附加为新的可放置区域。

看看这个被剥离的小提琴： http ： //jsfiddle.net/DKBU9/1/ （省略sortable（））

HTML

 
foo1
 
foo2
 
foo3
 
 
  

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放在一个函数中并在drop事件中运行该函数，但我什么也没得到。

最终，我希望能够在“池”列表和克隆列表之间以及克隆列表本身之间进行拖放，以及对克隆列表中的项进行排序。

Answer 1

看看这个小提琴 。

您需要再次设置droppable事件处理程序。 我认为克隆（true）（即数据和事件）会使事情有些混乱。 看看这个答案 。 特别：

我认为复制一个应用了插件的元素是不安全的，除非你100％确定插件的设计和编码方式可以使用相同的插件实例支持多个DOM元素。

在这种情况下，只需在克隆后添加droppable事件即可。

新function是：

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

还要看一下这个问题 ，它也发现克隆项目不可删除（如果它对你有用，请查看解决方法）。