拖动时克隆节点

我希望能够创建我想要拖动的元素的副本。 即时通讯使用标准的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看起来像这样

  
Drag me
 
 Drop items on me 

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*));