javascript - 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));
    }
});

​</p>