拖动时克隆节点答案

【问题标题】：clone node on drag拖动时克隆节点
【发布时间】：2010-10-12 01:01:33
【问题描述】：

我希望能够创建我想要拖动的元素的副本。我使用标准的 ui 可拖放。我知道助手克隆选项。但这不会创建副本。拖动的项目恢复到原来的位置。

【问题讨论】：

【解决方案1】：

标记，

试试这个例子：

        $(document).ready(function(){
        $(".objectDrag").draggable({helper:'clone'});  

        $("#garbageCollector").droppable({
            accept: ".objectDrag",
            drop: function(event,ui){
                    console.log("Item was Dropped");
                    $(this).append($(ui.draggable).clone());
                }
        });

    });

而 Html 看起来像这样

        <div class="objectDrag" 
        style="width:10%; color:white;border:black 1px solid; background-color:#00A">Drag me</div>

    <div id="garbageCollector" style="width:100%; height:400px; background-color:#333; color:white;"> Drop items on me</div>

【讨论】：

斯科特，非常感谢。但我希望克隆/删除的元素位于它被删除的相同位置。你知道我该怎么做吗？我试图添加.css（ui.position）。但它没有工作
马克，我的第一个猜测是使用 .css(ui.position)，但如果你尝试过......你可以尝试创建一个临时副本停止时的可拖动对象。这应该包含对象的相对位置。将其附加到容器而不是对象本身。告诉我

【解决方案2】：

由于我（还）无法发表评论，我将把它作为一个单独的答案 - 以防有人像我一样发现这个问题：

对于评论中的问题

“但是我希望克隆/删除的元素位于它被删除的位置。你知道我该怎么做吗？”

我在不同的 SO 问题中找到了解决方案，答案是更改此行：

   $(this).append($(ui.draggable).clone());

到

   $(this).append($(ui.helper).clone());

（将 ui.draggable 更改为 ui.helper）

希望对你有帮助。

【讨论】：

【解决方案3】：

要重新拖动克隆/复制，请将withDataAndEvents 参数设置为true：

$(this).append($(ui.draggable).clone(*true*));

【讨论】：