CODEWITHSUNDEEP
jquerydraggabledroppable
user2680746
user2680746

Reputation: 11

Jquery Draggable/Droppable appending multiple divs

I am trying to get a droppable area to accept multiple divs but it will only accept the most recently declared. I'm having trouble finding out how to go about this problem.

Here is the code:

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

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

Upvotes: 1

Views: 9010

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388316

When you pass the accept option twice to a object the latest one will overwrite the first one

Try

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

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

Demo: Fiddle

Upvotes: 5

Tricky12
Tricky12

Reputation: 6822

You should try making a separate class from square and rect, such as "droppableShape". Then add it as a second class to each of them and just use one accept.

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

Upvotes: 0

Michael B.
Michael B.

Reputation: 2809

You should use "accept:" only once to define the selector of accepted elements

Upvotes: 0

Related Questions