Jquery Draggable/Droppable appending multiple divs

Question

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

We will need to see your HTML markup, as well. – DevlshOne Aug 14 '13 at 02:32 — DevlshOne, Aug 14 '13 at 02:32

Arun P Johny · Answer 1 · 2013-08-14T03:42:14.957

5

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

edited Aug 14 '13 at 03:42

answered Aug 14 '13 at 03:36

Arun P Johny

384,651
66
527
531

may I ask you to take a look at a jQuery draggable and droppable related question here : https://stackoverflow.com/questions/54498364/jquery-drag-and-drop-simulation-does-not-work-for-the-last-draggable ? – Istiaque Ahmed Feb 03 '19 at 19:17

score 0 · Answer 2 · answered Aug 14 '13 at 02:41

0

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

answered Aug 14 '13 at 02:41

Michael B.

2,798
1
14
18

score 0 · Answer 3 · answered Aug 14 '13 at 03:34

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

Jquery Draggable/Droppable appending multiple divs

3 Answers3