使用jQuery UI在目标区域放置可拖动对象后进行克隆。

Question

使用jQuery UI在目标区域放置可拖动对象后进行克隆。

jqueryjquery-ui-draggablejquery-draggablejquery-droppable

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示例 从示例中可以看到，图片仅在

区域内第一次下落。但我希望用户能够无限次数地将相同的图像拖放到指定区域。

例如，一个用户可以将图像拖放5次，那么指定区域就会有5个克隆图像。如何做到呢？

- Saifullah Alam

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jean-Paul · Accepted Answer

你已经接近成功了。你确实需要使用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);
        }
    });
});

演示

_{作为一条评论：我强烈推荐上述方法，因为在droppable的drop事件中克隆比绑定draggable的dragstop事件更好。这是因为否则会产生太多重复的克隆：我的代码确保不会产生冗余的克隆。要了解我的意思，请打开这个 jsFiddle（使用错误的方法：在拖动停止时克隆），尝试将可拖动元素拖到指定区域之外。会发现会向DOM中添加重复的克隆。这既效率低下又丑陋，应该避免。}