Javascript拖放同一对象的多个实例答案

【问题标题】：Javascript drag and drop multiple instances of the same objectJavascript拖放同一对象的多个实例
【发布时间】：2012-09-09 20:35:08
【问题描述】：

我想开发一个 javascript 拖放应用程序，就像您看到的 here 一样，您可以在其中选择和对象并将其拖动到另一个区域。但我想用一个转折来做到这一点。我希望能够多次拖动同一个对象，而不是将对象从书架移动到篮子，我想将对象的一个实例拖到书架上并且仍然在书架上保留对象。

这就像购买同一个对象的多个实例，每次我将对象从书架拖到篮子时，我都会将该对象的另一个实例添加到篮子中。

关于如何实现这种效果的任何想法？

【问题讨论】：

标签： javascript drag-and-drop

【解决方案1】：

您执行与常规拖放相同的操作，但不是删除拖动的对象，而是克隆它。

实现拖放有点棘手，像 jQuery 这样的库确实可以为您节省大量时间和精力。 jQuery UI's draggable 有一个 helper: clone 选项，它将拖动的对象留在原地，而是克隆它。然后，当使用jQuery UI Droppable 定义您的放置区域时，您可以对放置的元素做任何您想做的事情，例如创建一个代表篮子项目的新元素，而不影响拖动的项目。因此，如果使用 jQuery 是一种选择，那一点也不难。

UPDATE: HERE'S A QUICK DEMO

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>

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

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

【讨论】：

是的，使用jQuery没问题，谢谢你的信息，我会检查的。
@Cláudio Ribeiro 我用快速演示小提琴更新了我的答案。
非常感谢，这正是我想要的。