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，因为它们也会被克隆。另外，您必须先附加该元素，然后再对其应用可拖动元素。