交换后jQuery可拖动项目失去了可拖动性（使用jsfiddle示例）

我有两个li元素，它们是jQuery draggable。 当我将盒子’one’拖放到方框’two’上时，它们会被交换掉。 到现在为止还挺好。 （延迟修复了此处描述的另一个问题。）然而，即使在重置其可拖动选项后，元素现在也不再可拖动。

任何想法如何解决这一问题？ 在这里完全工作的jsfiddle

     jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true); var copy_from = $(this).clone(true); $(to).replaceWith(copy_from); $(this).replaceWith(copy_to); }); }; $(document).ready(function() { options = { revert: true}; $("li").draggable(options); $('#wrapper').droppable({ drop: function(event, ui) { window.setTimeout("Swap()", 600); } }); }); function Swap() { $('#one').swapWith($('#two')); //trying to fix problem where elements can't be dragged anymore $("li").draggable("destroy"); $("li").draggable(options); }    
 
 
 
 one
 
 
 
 two
 
 
 
 
   

Answer 1

所以在玩了你的代码之后，这是我得出的结论。

看起来可拖动的jqueryui方法正在单独跟踪其对象。 克隆时，不会克隆该跟踪。 我修改了你的代码如下：

 jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true).appendTo($("#wrapper")); var copy_from = $(this).clone(true).appendTo($("#wrapper")); //$(to).replaceWith(copy_from); //$(this).replaceWith(copy_to); }); }; 

你可以看到迷人的结果http://jsfiddle.net/XkUDv/16/

如您所见，如果拖动新的克隆对象，它将移动原始对象而不是克隆对象。

这不是答案，但我希望它有所帮助。

更新：

仔细看看克隆后我将javascript更改为：

现在它按照你想要的方式工作:)

我猜测问题是，因为clone（true）复制事件处理程序，当您尝试将draggable重新附加到新克隆时，它会看到旧的事件处理程序并忽略这些元素。 所以我没有克隆（true），而是将其更改为clone（）;

希望有所帮助！

工作版： http ： //jsfiddle.net/XkUDv/21/