Javascript拖放同一对象的多个实例 [英] Javascript drag and drop multiple instances of the same object

问题描述

我想开发一个JavaScript拖放应用程序，就像您可以看到此处，您可以在其中拾取对象并将其拖动到另一个区域。但我想这样做。我希望能够多次拖动同一对象，而不是将对象从书架移动到篮子，而是希望将对象的一个​​实例拖动到书架上，并且仍然将对象放在书架上。

I want to develop a javascript drag and drop application just like the one you can see here , where you can pick and object and drag it to another area. But i want to do this with a twist. I want to be able do drag the same object multiple time, instead of moving the object from the book shelf to the basket, i want to drag one instance of the object to the book shelf and still have the object on the book shelf.

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

It's like buying multiple instances of the same object, each time i drag the object from the book shelf to the basket, i add another instance of the object to the basket.

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

Any ideas on how can i achieve this effect?

推荐答案

您可以执行与常规拖放相同的操作，但是您无需克隆被拖动的对象，而是对其进行克隆。

You do the same thing as with regular drag and drop but instead of removing the dragged object, you clone it.

实现拖放操作有些棘手，像jQuery这样的库确实可以为您节省大量时间和精力。 jQuery UI的可拖动具有 helper：clone 选项这将拖动的对象留在原处，而是将其克隆。然后，当使用 jQuery UI Droppable 定义放置区域时，您可以对放置的元素进行任何操作，例如创建一个表示购物篮项目的新元素，而拖动的项目保持不变。因此，如果使用jQuery是一种选择，那一点也不难。

Implementing drag and drop is kind of tricky, a library like jQuery could really save you a lot of time and effort. jQuery UI's draggable has a helper: clone option which leaves the dragged object in place, cloning it instead. Then when defining your drop area using jQuery UI Droppable you can do whatever you want with the dropped element, like creating a new element representing the basket item, leaving the dragged item untouched. So if using jQuery is an option, that wouldn't be difficult to do at all.

更新：这是一个快速演示

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拖放同一对象的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！