使用jQuery UI删除目标区域后克隆可拖动

我想让一些图像尽可能多地放在目标区域。 但是图像只下降了一次。 我的jQuery UI代码：

$(function() { $( ".draggable img").draggable({ revert: "invalid", appendTo: "#droppable", helper: "clone" }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); var image = $(".ui-draggable"); $( "" ).image.src.appendTo( this ); } }); }); 

请看这里的演示： jsFiddle示例

从示例中，您可以看到图像仅在第一次出现在div区域中。 但我希望用户能够在目标区域中拖放同一图像多次 。

因此，例如，用户可以将图像拖放5次，并且将在目标区域中克隆 5个图像。 我怎样才能做到这一点？

Answer 1

你快到了。 你需要helper: "clone"确实是helper: "clone"属性。 执行此操作的最佳方法是使用.clone（） 触发drop事件时创建新克隆。 然后只需初始化它就完成了：

 $(function() { $(".draggable img").draggable({ revert: "invalid", helper: "clone" }); $("#droppable").droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function(event, ui) { var newClone = $(ui.helper).clone(); $(this).after(newClone); } }); }); 

DEMO

_{作为评论：我强烈推荐上面描述的方法，因为最好在droppable的drop事件中创建克隆，然后将dragstop事件绑定到draggable 。 这是因为否则会产生太多克隆：我的代码确保不会产生多余的克隆。 要查看我的意思，请打开此jsFiddle （使用错误的方法： 在dragstop上克隆 ）并尝试将可拖动的内容放在指定区域之外。 会发生什么是冗余克隆将添加到DOM。 这既低效又丑陋，应该避免。}