拖动时克隆节点

Question

我希望能够创建一个要拖动的元素的副本。我正在使用标准的UI可拖拽和可放置组件。我知道有关助手克隆选项的信息，但它并不会创建一个副本。被拖动的项目会恢复到原始位置。

- mark

Answer 1

Mark,

尝试这个例子：

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

- Scott

---

Scott，非常感谢您的帮助。但是我想要克隆/拖放的元素在被放置的位置保持不变。您知道我该怎么做吗？我尝试添加.css(ui.position)，但它没有起作用。 - mark

马克，我的第一个猜测是使用.css(ui.position)，但如果你已经尝试过了... 你可以尝试在停止时创建一个可拖动对象的临时副本。这应该包含对象的相对位置。将其附加到容器而不是对象本身。让我知道。 - Scott

Answer 2

由于我暂时还不能评论，我将这个作为一个单独的答案留下来——以防像我这样的人会发现这个问题：

对于评论中的问题：

“但是我希望克隆/拖动的元素在被放置的位置与原位置相同。你知道我该怎么做吗？”

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

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

为了

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

(将ui.draggable更改为ui.helper)

希望这有所帮助。

- Solo

Answer 3

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

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

- parampadam