jQuery 拖放：克隆的可拖动移动原始内容

Question

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

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 有一个相对位置（并且需要保持这种状态）。

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

Answer 1

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

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

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

Answer 2

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

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

否则，您将拖动原始项目，该项目将留在完成拖动操作的位置。

Answer 3

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

编辑：如果您出于其他原因需要 withDataAndEvents，您可以尝试在进行克隆之前在原始文件上使用draggable（“destroy”），然后在克隆之后再次使其可拖动？不是最优雅的，但它有效： http://jsfiddle.net/GheD5/

Answer 4

您看过帮助选项吗？

Answer 5

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