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」錨點被移除時，處理程序也將被移除。