删除后从克隆中删除可拖动，但保留事件绑定？答案

【问题标题】：Remove draggable from clone after being dropped, but retain event bindings?删除后从克隆中删除可拖动，但保留事件绑定？
【发布时间】：2013-11-26 20:23:56
【问题描述】：

我遇到了一个 jQuery draggable 概念。这是一个例子：

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

基本上，我有一个可拖动的元素 - 小红框。您可以单击并将其拖动到右侧的表格中，当您将其放入表格单元格时，它将填满该单元格。这部分工作正常。

这就是我难过的地方：

我需要在draggable 初始化中使用helper: "clone"，以便将点击事件绑定传递给克隆。如果您从DroppedOnGrid 中的clone(true) 中删除true，您可以看到这一点，当单击已拖放到网格上的红色框时，您将不再获得alert。 这部分工作正常。
一旦将一个红色框拖放到网格上，并且它已展开以填充单元格，我想从该克隆中删除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 放置到网格后禁用它？

【问题讨论】：

这个怎么样？ jsfiddle.net/Rd83F

标签： jquery jquery-ui draggable droppable

【解决方案1】：

最好不要clone(true)，因为可拖动小部件可能会将事件附加到被拖动的项目。相反，您可以克隆元素并将您的事件附加到父容器。

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

和

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

Demo

【讨论】：