jQuery droppable draggable删除DnD不止一个

Question

我之前发布了一个DnD的问题，现在已经解决了，但是在测试期间，我看到其他代码中有一个错误：“删除”操作。
我相信这是完全合乎逻辑的，我错过了它的逻辑解释，但我无法在互联网上找到任何答案（还），也没有在DnD很难触及的书籍中找到答案。

问题是，当一个droppable被多个（> 1）droppable作为目标时，它将导致在执行REMOVE时删除的所有更早的返回。

见你的自我：http://jsfiddle.net/BCnyU/

遵循以下步骤：

1） “拖2” 上的 “降3”
2）在 “拖1”， “下降4”
3）在 “下降5”
       没什么特别的，只是为了让他们走出我们的方式 “拖4”。
现在做到这一点：
4）上的 “滴1”
5）单击 “撤消” 上 “拖动3”
6） “拖5” 的 “滴1”， “拖3”
7） “drop 3”on“drop 2”

什么情况是我们在“drop 1”上有两（2）个drop事件。
当您现在点击“拖动5”的“撤销”时，您可能会预期只会返回“拖动5”。
但没有NO ...“拖动5”和“拖动3”将出现！

谁能解释我，并给出解决方案？

Answer 1

每次将元素拖放到拖放区域时，都会将点击处理程序附加到该拖放区域。这些点击处理程序不会被删除，因此除了添加新的处理程序外，它们仍保留在该区域中。您添加和移除元素越多，绑定的点击处理程序越多。

最简单的方法来解决这个问题，而不改变你的代码将改变click为one。 one允许您附加一个只能执行一次的处理程序。

http://jsfiddle.net/BCnyU/101/

 .one("click",function(){ 
     $(ui.draggable).show(); 
     $(this).css("color","black"); 
     $(this).text(oldvalue); 
     $(this).droppable({disabled:false}); 
     $(this).removeClass('OK NOK'); 
     var numItems = $('.OK').length; 
     $('.counter').html('Correct: '+numItems +'/5'); 
     }); 

另一种选择是将点击处理程序添加到“撤消”锚标记，而不是整个拖放区域。然后，当“UNDO”锚点被移除时，处理程序也将被移除。