Question

I am new to jQuery and currently blocked at (I suppose) a simple issue.

I have two lists: a droppable and a draggable; 2 questions about that:

1) How to know the items that are dropped?
So list all the items that are in the “dropped” zone.

2) How to check if the dropped items are in the correct drop zone?
Each have an ID and should be dropped in the correct zone (drag1 to drop1).

Doing this “live” is easy, just check if ID of UI is the same as the ID of the $(this) with the drop-function.

But I want to allow the drop always and recalculate each time how many are dropped correctly.
You can use a counter but the remove option (see example) will make that too complicate.

In short, how to iterate the droppables and check if the dropped one on it, is correct.

CODE : http://jsfiddle.net/setki/BCnyU/

Answer 1

OK, I found a solution, although I am not too happy with it because it looks “strange”.

What I do is add an extra Class to the Droppable: “OK”.
It’s a class that has no style (but can be used for styling if wanted).

if (dragID == dropID) {
  $(this).addClass('OK');
} else {
  $(this).addClass('NOK');
}

Then I just count all those who have that style

var numItems = $('.OK').length;
$('.counter').html('Correct: '+numItems +'/5');

And not to forget, remove the class also if draggable is removed from droppable

$(this).removeClass('OK NOK');

Well, anyone can use this simple solution, but I am keen to know if there really are no other solutions in jQuery.

The working example can be found at: http://jsfiddle.net/setki/BCnyU/

Have fun!