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

演示：Fiddle

Answer 2

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

Answer 3

你应该尝试从square和rect创建一个单独的类，例如“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);

Jquery Draggable / Droppable附加多个div

3 个答案: