交换两个jQuery可拖动列表项不能正常工作（使用jsFiddle示例）

下面的极简主义工作示例将盒子’one’拖放到盒子’2’上时交换两个盒子。 问题是当盒子’one’掉落时，它的样式有’top’和’left’值，使它远离它应该掉落的位置。 它的类包括’ui-draggable-dragging’。 顶部和左侧值似乎与在放置之前拖动元素的数量相关。 拖延被“打断”因此残留的“ui-draggable-dragging”课程？

我错过了什么使交换无缝工作？ 完整的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) { $(ui.draggable).swapWith($('#two')); } }); });    
 
 
 
 one
 
 
 
 two
 
 
 
 
   

Answer 1

这是我的解决方法 。

我的猜测是，在没有查看和理解jQuery的内部拖放和拖动工作原理的情况下，在拖放中的所有内容都已完成处理之前已经过了一段时间。

所以我认为在完成所有工作之前不应该启动交换。 因为我不知道什么时候发生这种情况，所以我在一段时间后发生了交换。 我在drop事件中使用了setTimeout。 我不得不使用至少600毫秒来确保’一切都清晰安全’。 不到600毫秒，“顶部”和“左侧”仍有一些值，这意味着该过程尚未完成。 延迟越长，这些值越小; 直到任何更大的顶部和左边相等的零。 通过反复试验600毫秒似乎做到了这一点。

如果有人有“更清洁”的解决方案，我会很感激。 另外，“科学”解释也很有帮助。

Answer 2

继续你的其他post，我添加了帮助：’clone’选项，然后告诉脚本删除任何带有.ui-draggable-dragging类的元素

工作实例： http ： //jsfiddle.net/XkUDv/26/

希望有所帮助！

PS：我之前没有使用过jsfiddle，所以感谢你在向我展示:)