拖动时克隆节点 [英] clone node on drag

问题描述

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

i want to be able to create a copy of the element that i want to drag. im using the standard ui draggable and droppable. i know about the helper clone option. but that does not create a copy. the dragged item gets reverted back to the original position.

推荐答案

标记，

试试这个例子：

        $(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看起来像这样

And the Html looks like this

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

这篇关于拖动时克隆节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！