使用 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() 创建一个新的克隆当 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 .这是因为否则会产生过多的克隆：我的代码确保不会产生多余的克隆。要了解我的意思，请打开 this jsFiddle（它使用 错误 方法：在 Dragstop 上克隆）并尝试将可拖动的放在之外指定区域。发生的情况是多余的克隆将被添加到 DOM 中。这既低效又丑陋，应该避免。}