jQuery draggable revert based on condition

Question

I am having an issue related jQuery draggable and droppable. Here is description something what I want to do.

First: I have two divs. One is &

Answer 1

You can use the accept option which takes a function to do this much easier, like this:

$("#selected ul").droppable({
    accept: function() {
        return $("#selected li").length < 5;
    }
});

You can test it out here. When you drag elements out, the .length goes down and it'll accept elements again...no reason to get any more complicated :)

Answer 2

First of all, setting revert to false, will disable the revert function entirely. As you point out, you'll be able to drop the draggables anywhere. What you usually want is revert: 'invalid' which means that it'll revert whenever it's dropped on anything that isn't a droppable that accepts it.

What you want to do ought to be something like this:

$('#selected').droppable({
    drop: function() {

       // since you're doing a full re-calc every time, this doesn't need to be global
       var total = $("#selected li").length;

       if(total >= 5) {

           // once you've reached five, simply don't accept any more elements
           // the rest will revert if dropped here
           $('#selected').droppable('disable');
       }
    }
});