使用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示例

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

因此，例如，用户可以拖放图像5次，在目标区域中将有5个图像被克隆。我该怎么做？

Answer 1

你差不多到了。您确实需要helper: "clone"属性。最好的方法是在drop事件触发时使用.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);
        }
    });
});

演示

_{作为评论：我强烈建议使用上述方法，因为最好在droppable的drop事件中进行克隆，然后将dragstop事件绑定到draggable。这是因为否则会产生太多的克隆：我的代码确保不会产生多余的克隆。要理解我的意思，请打开这个jsFiddle(它使用了错误的方法：在dragstop上克隆(，并尝试将可拖动的放到指定区域之外。所发生的情况是，冗余克隆将被添加到DOM中。这既低效又丑陋，应该避免}