CODEWITHSUNDEEP
javascriptjqueryjquery-uidroppable
Gmart
Gmart

Reputation: 43

jQuery - Droppable doesn't accept more than one draggable

I have n draggable elements, all to be collected in one droppable div, say "#collector".

Can anybody explain me why "#collector" doesn't accept more than one draggable element in it? The counter stops at "1". Here's the code:

$("#argh").draggable();
$("#argh2").draggable();

var i = 1;

$("#collector").droppable({
    drop: 
         function( event, ui ) {
           $(this).addClass("fill").find("p").html("There are "+i+"/10 elements.");
           i++;
         }
});

Thanks in advance.

Upvotes: 1

Views: 450

Answers (1)

MrNobody007
MrNobody007

Reputation: 1837

From your code, the droppable is accepting multiple draggable.

Here is the working jsFIddle

$("#collector").droppable({
drop: 
     function( event, ui ) {
       $(this).addClass("fill").find("p").html("There are "+i+"/10 elements.");
       i++;
     }
});

If you still find it difficult to drop multiple div's then try including the tolerance option for the droppable div. Refer API DOC.

Upvotes: 1

Related Questions