jQuery拖放：克隆的可拖动移动原始答案

【问题标题】：jQuery drag&drop: cloned draggable moves originaljQuery拖放：克隆的可拖动移动原始
【发布时间】：2011-07-30 22:15:56
【问题描述】：

我在 jQuery 中遇到了拖放问题。在我的代码中有一个可拖动的 div。当我将它移动到某个可放置的表格单元格时，该 div 的克隆将附加到表格单元格中。但是当我拖动克隆时，原来的 div 被移动了。这是放置时调用的函数：

function(event, ui)
{
    var draggable = ui.draggable.clone(true);  // cloning including attrs and children
    draggable.draggable(); // this is something I tried with no effect
    $(this).empty(); // empty the droppable cell
    $(this).append(draggable); // append the div to the cell
}

我无法通过谷歌搜索找到明确的答案。我不知道它是否与此有关，但 div 有一个相对位置（并且需要保持这种状态）。

我如何确保克隆可以像原始一样被拖动？

【问题讨论】：

可以将id 属性与原始元素一起克隆吗？这很可能会导致奇怪的问题。
@Andrew：是的，它与它一起被克隆，但我不需要可拖动的 id 属性。我使用另一个基于自定义属性 ('[drag=article]') 的 jquery 选择器。

标签： jquery jquery-ui drag-and-drop jquery-ui-draggable

【解决方案1】：

我就是这样做的，这应该可以解决问题。

 $(".draggable").draggable({ helper: 'clone' });
 $(".droppable").droppable({
    drop: function (event, ui) {
       ui.draggable.clone().appendTo($(this)).draggable();
    }
 });

我不知道你是否这样做了，但不要在可拖动对象上使用 id-s，因为它们也会被克隆。此外，您必须在应用可拖动元素之前附加元素。

【讨论】：

谢谢！这样可行。也许最大的区别是在克隆上使用 appendTo，而不是使用 droppable 中的 append。还有一种方法可以将可拖动属性克隆到克隆中吗？因为现在新的可拖动对象没有助手，我不想硬编码。
找到我自己对该评论的回答：ui.draggable.draggable('option') 复制当前可拖动对象的所有选项。

【解决方案2】：

更改您的 draggable 初始化代码以包含 helper: "clone"

 $("selector").draggable({
      ...
      helper: "clone",
      ...
 });

否则，您将拖动刚完成拖动操作的原始项目。

【讨论】：

是的，我有。如果我拖动克隆，原件会从其起始位置拖动。

【解决方案3】：

您是否尝试过将 false 传递给 .clone()？该 bool 代表 withDataAndEvents，因此您继承了也附加到旧对象的所有相同事件。

编辑：如果您出于其他原因需要 withDataAndEvents ，您可以在克隆之前尝试在原始右侧使用 draggable("destroy") ，然后在之后再次使其可拖动？不是最优雅的，但它有效：http://jsfiddle.net/GheD5/

【讨论】：

是的，我尝试在克隆方法中使用 false，但我需要子元素和属性相同，所以我使用了 true。明天我会试试你编辑的评论，谢谢。

【解决方案4】：

你看过Helper Option吗？

【讨论】：

是的，我使用了 helper: 'clone' 但它不是关于拖动，而是在放置时克隆实际元素。

【解决方案5】：

你能展示完整的代码吗？我现在只是猜测，但使用 'delegate()' http://api.jquery.com/delegate/ 可能是您解决方案的关键。

【讨论】：

我现在不知道应该如何使用委托，但我想我已经有了一个解决方案，感谢 rucsi。不过谢谢。