题
我希望能够创建我想要拖动的元素的副本。即时通讯使用标准的ui draggable和droppable。我知道帮助克隆选项。但这不会创建副本。拖动的项目将恢复到原始位置。
解决方案
标记,
试试这个例子:
$(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>
其他提示
由于我无法评论(还)我会将此作为一个单独的答案 - 如果有人像我一样会发现这个问题:
来自评论的问题
&quot;但我希望克隆/删除元素处于丢弃的相同位置。你知道我怎么做吗?“
我在不同的SO问题中找到了解决方案,答案是改变这一行:
$(this).append($(ui.draggable).clone());
到
$(this).append($(ui.helper).clone());
(将ui.draggable更改为ui.helper)
希望它有所帮助。
要重新拖动克隆/副本,请将 withDataAndEvents
参数设置为 true :
$(this).append($(ui.draggable).clone(*true*));
不隶属于 StackOverflow