使用 jQuery UI 拖放到目标区域后克隆可拖动

Question

我希望一些图像尽可能多地落入目标区域。但图像只下降一次。我的 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");
           $( "<img />" ).image.src.appendTo( this );
        }
    });
});

请看这里的演示：jsFiddle example

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

例如，用户可以拖放图像 5 次，目标区域将 克隆 5 张图像。我该怎么做？

Answer 1

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

$(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。这是因为否则会产生太多克隆：我的代码确保不会产生多余的克隆。要明白我的意思，请打开 this jsFiddle（它使用 错误的 方法：cloning on dragstop）并尝试放下可拖动的 在 指定区域之外。发生的情况是冗余克隆将添加到 DOM。这既低效又丑陋，应该避免。}