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 <div id="selected"> and another is <div id="container">. "container" has 10 <li> which are draggable and droppable into "selected". Here is code:

<div id="selected">
    <ul class="sortable-list">
    </ul>
</div>


<div id="container">
    <ul class="sortable-list">
             <li>1</li>
             <li>2</li>
             <li>....</li>
             <li>9</li>
             <li>10</li>
    </ul>
</div>

Second: I want to allow any 5 <li>s from "container" to "selected" div. If someone tries to add 6th <li>, then it must not allow user to it. That is the 6th <li> that is going to be inserted into "selected" must be reverted using jQuery draggable option revert.

i.e. $("#container li").draggable({ revert: true }); Here is javascript code for that.

$(document).ready(function(){

    var total = 0;
    $("#selected").droppable({
        drop: function() {
                total = $("#selected li").length;
                //alert(total);
                if (total >= 5) {
                    $("#container li").draggable({ revert: true });
                } else {
                            // below code is not working
                    $("#container li").draggable({ revert: false }); // this is making whole feature weird. I can drag all the <li> anywhere
                }
            }
    });
});

This is working fine.

Third: But when I drag an <li> from "selected" to "container", the "selected" div will have only 4 <li>s. So in this situation, later on user should be able to add another <li> into "selected" div from "container" div. But unfortunately it is not working. All the <li>s I try to drag and drop into "selected" are being reverted due to if (total >= 5 ) condition.

Can anyone help me to solve this out using draggable revert option? Please...

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