Question

I’m having some trouble with jquery’s drag and drop. I want to drag only 1 element from each ‘ul’. So the result i want is a ‘test’ and a ‘foo’ in the red box. How can i keep track of what elements are in the red box?

Here is the code:
http://jsfiddle.net/9edge/CTpTr/

thanx in advance

Answer 1

Fill two seperate counters, one for each item type (And give your items classes to identify them).

Use the check() function to check your limits, and return true/false if reached or not, use the drop() function to update your counter.

$(function() {
    var limit = 1;
    var counter_test = 0;
    var counter_foo = 0;
    $("[id=drag]").draggable({
        revert: "invalid"
    });
    $('#div1').droppable({
        accept: function(item) {
            if ($(item).hasClass('test')) {
                if (counter_test >= limit) {
                    return false;
                }
            }
            else {
                if (counter_foo >= limit) {
                    return false;
                }
            }
            return true;
        },
        drop: function(e, ui) {
            if (ui.draggable.hasClass('test')) {
                counter_test++;
            }
            else {
                counter_foo++;
            }
        }
    });
});
​

Fiddle

New Fiddle with IDs fixed