jQuery droppable draggable remove DnD 不止一个

Question

我之前发布了一个 DnD 问题，现在已解决，但在测试期间我发现其他代码中存在错误：“删除”操作。
我确信这是完全合乎逻辑的，并且我错过了对它的合乎逻辑的解释，但我在互联网上（目前）和几乎没有涉及 DnD 的书中找不到任何答案。

问题是，当一个 droppable 被多个 (>1) 个 droppable 定位时，在对其执行 REMOVE 时，这将导致返回 ALL 之前的 droppable。

请自行查看：http://jsfiddle.net/BCnyU/

按照以下步骤操作：

1) 在“放置 3”上“拖动 2”
2) 在“拖放 4”上“拖动 1”
3) 在“下降 5”上“拖动 4”
没什么特别的，只是为了让它们远离我们。
现在这样做：
4) 在“drop 1”上“拖动 3”
5）点击“拖动3”的“撤消”
6) 在“drop 1”上“拖动 5”
7) 在“drop 2”上“拖动 3”

发生的情况是我们在“drop 1”上有两 (2) 个 drop 事件。
当您现在单击“拖动 5”的“撤消”时，您可能会认为“拖动 5”只会返回。
但是NO NO...会出现“drag 5”和“drag 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”锚标记，而不是整个放置区域。然后，当“UNDO”锚被移除时，处理程序也会被移除。