使用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"確實是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 。 這是因為否則會產生太多克隆：我的代碼確保不會產生冗余克隆。 要查看我的意思，請打開此jsFiddle （使用錯誤的方法： 在dragstop上克隆 ）並嘗試將可拖動的對象放在指定區域之外。 會發生什么是冗余克隆將添加到DOM。 這既低效又丑陋，應該避免。}