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

​