Question

我想开发一个javascript拖放应用程序，就像你可以看到here那样，你可以在那里挑选对象并将其拖动到另一个区域。但我想扭转这一切。我希望能够多次拖动同一个对象，而不是将对象从书架移动到篮子，我想将对象的一个实例拖到书架上，并且仍然在书架上有对象。

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

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

Answer 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>

JS

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

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

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

1 个答案: