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

时间：2015-07-04 08:58:56

标签： jquery jquery-ui-draggable jquery-draggable jquery-droppable

我希望一些图像尽可能多地放在目标区域。但是图像只下降了一次。我的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

从示例中您可以看到图像仅在第一次

。但是我希望用户能够在目标区域中拖放相同的图像，无论他们想要多少次。

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

1 个答案:

答案 0 :(得分：3)

你快到了。您确实需要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

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

相关问题
最新问题