Question

我希望能够创建我想要拖动的元素的副本。即时通讯使用标准的ui draggable和droppable。我知道帮助克隆选项。但这不会创建副本。拖动的项目将恢复到原始位置。

Answer 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>

Answer 2

由于我无法评论（还）我会将此作为一个单独的答案 - 如果有人像我一样会发现这个问题：

来自评论的问题

“但我希望克隆/掉落的元素处于被丢弃的相同位置。你知道我该怎么做吗？”

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

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

到

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

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

希望它有所帮助。

Answer 3

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

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

拖动时克隆节点

3 个答案: