Javascript拖放同一對象的多個實例

Question

我想開發一個javascript拖放應用程序，就像在這里看到的那樣，您可以在其中進行拾取和反對並將其拖放到另一個區域。 但我想這樣做。 我希望能夠多次拖動同一對象，而不是將對象從書架移動到籃子，而是希望將對象的一個​​實例拖動到書架上，並且仍然將對象放在書架上。

這就像購買同一對象的多個實例一樣，每次我將對象從書架上拖到購物籃中時，我都會將該對象的另一個實例添加到購物籃中。

關於如何實現此效果的任何想法？

Answer 1

您可以執行與常規拖放相同的操作，但是您無需克隆被拖動的對象，而是對其進行克隆。

實現拖放有點棘手，像jQuery這樣的庫確實可以為您節省大量時間和精力。 jQuery UI的draggable具有一個helper: clone選項，該選項將拖動的對象保留在原處，而將其克隆。 然后，當使用jQuery UI Droppable定義放置區域時，您可以對放置的元素做任何您想做的事情，例如創建代表購物籃項目的新元素，而使拖動的項目保持不變。 因此，如果使用jQuery是一種選擇，那一點也不難。

更新：這里是一個快速的演示

HTML

<div id="list">
    <div class="productItem">product 1</div>
    <div class="productItem">product 2</div>
    <div class="productItem">product 3</div>
</div>

<div id="basket">
</div>​

JS

$(".productItem").draggable({
    helper: 'clone',
    handle: "productItem"
});

$("#basket").droppable({
    accept: ".productItem",
    drop: function(event, ui){
        $("<div></div>")
            .html(ui.draggable.text())
            .appendTo($(this));
    }
});