在被刪除後從克隆中移除可拖動，但保留事件綁定？

Question

我有一個jQuery draggable概念我遇到了麻煩。這裏是例子：

http://jsfiddle.net/3CtfD/3/

基本上，我有一個可拖動的元素 - 紅色的小盒子。您可以點擊並拖動它到右側的表格中，當您將它拖放到表格單元格中時，它將填滿該單元格。這部分工作正常。

此處，我很爲難：

1. 我需要helper: "clone"在draggable初始化，這樣點擊事件一起克隆通過綁定。如果您從clone(true)中刪除trueDroppedOnGrid，則在點擊已放入網格的紅色框時，您將不會再看到alert。 這部分工作正常。
2. 一旦紅框被放到網格上，並且它已經擴展到填充單元格，我想從該克隆中刪除draggable功能，因此不能再次拖動它。你會注意到一旦你將一個紅色方塊放到網格上，然後試着拖動那個克隆，你實際上仍然抓住左邊的紅色方塊。

如果我從clone(true)刪除true，它按預期方式工作，但我在克隆上失去了我的單擊事件綁定。

我試着更新DroppedOnGrid功能的使用方法：

ui.draggable.clone(true).css({ height: "100%", width: "100%"}).appendTo($(this)).draggable("destroy"); 

導致：

無法讀取的不確定

我還屬性 '選項'嘗試簡單地刪除ui-draggable類：

ui.draggable.clone(true).css({ height: "100%", width: "100%"}).appendTo($(this)).removeClass("ui-draggable"); 

但是這沒有效果。最後，我已經試過禁用拖動：

ui.draggable.clone(true).css({ height: "100%", width: "100%"}).appendTo($(this)).draggable("disable"); 

但是這導致了小紅框左側也成爲殘疾。

有誰知道我是如何實現將點擊事件傳遞給克隆的，但是一旦它被放置到網格上就禁用draggable？

Answer 1

最好不要clone(true)，因爲可拖動小部件可能會將事件附加到正在拖動的項目。相反，您可以克隆該元素並將您的事件附加到父容器。

$("#target, #origin").on("click", ".box", function() { 
    alert('clicked'); 
}); 

和

ui.draggable.clone().css({ 
     height: "100%", 
     width: "100%" 
}).appendTo($(this)); 

Demo