jQuery droppable Draggable 删除 DnD 多个

Question

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

问题是，当一个 droppable 已经被多个 (>1) droppable 瞄准，当对其执行 REMOVE 操作时，将导致返回所有之前丢弃的内容。

亲自查看：http://jsfiddle.net/BCnyU/

请按照以下步骤操作：

1) 在“放下 3”上“拖动 2”
2) 在“拖放 4”上“拖 1”
3) 在“放下 5”上“拖动 4”
    没什么特别的，只是为了让他们别挡我们的路。
现在执行此操作：
4) 在“放下 1”上“拖动 3”
5) 单击“拖动3”的“撤消”
6) 在“放下 1”上“拖动 5”
7) 在“放下 2”上“拖动 3”

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