jquery - Jquery Draggable/Droppable追加多个div

Question

我试图让一个可放置的区域接受多个 div，但它只会接受最近声明的。我很难找出如何解决这个问题。

这是代码：

$(".square").draggable({helper: 'clone'});
$(".rect").draggable({helper: 'clone'});

$("#canvas").droppable({
    accept: ".square",
    accept: ".rect",
    drop: function(ev,ui){
        $(ui.draggable).clone.appendTo(this);

Answer 1

当您将accept选项两次传递给一个对象时，最新的一个将覆盖第一个

尝试

$(".square").draggable({helper: 'clone'});
$(".rect").draggable({helper: 'clone'});

$("#canvas").droppable({
    accept: ".rect, .square",
    drop: function(ev,ui){
        $(ui.draggable).clone().appendTo(this);
    }
});

演示：小提琴

Answer 2

您应该只使用一次“接受：”来定义接受元素的选择器

Answer 3

您应该尝试从正方形和矩形中创建一个单独的类，例如“droppableShape”。然后将其作为第二个类添加到每个类中，然后只使用一个接受。

HTML

<...class="square droppableShape"..../>
<...class="rect droppableShape".../>

jQuery

$(".droppableShape").draggable({helper: 'clone'});

$("#canvas").droppable({
accept: ".droppableShape",
drop: function(ev,ui){
    $(ui.draggable).clone.appendTo(this);