3

我希望一些图像尽可能多次地落在目标区域。但图像仅下降一次。我的 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 个图像。我怎样才能做到这一点？

4

1 回答 1

3

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

演示

作为评论：我强烈推荐我上面描述的方法，因为最好在thendrop事件中进行克隆以将事件droppable绑定dragstop到draggable. 这是因为否则会产生过多的克隆：我的代码确保不会产生多余的克隆。要明白我的意思，请打开这个 jsFiddle（它使用了错误的方法：在 dragstop 上克隆）并尝试将可拖动对象放到指定区域之外。发生的情况是多余的克隆将被添加到 DOM 中。这既低效又丑陋，应该避免。

于 2015-07-04T09:24:46.367 回答