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...

score 17 · Accepted Answer · answered Nov 29 '10 at 10:48

17

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 :)

answered Nov 29 '10 at 10:48

Nick Craver

623,446
136
1,297
1,155

@Nick Craver: Yes, it is working. Here the new issue is that I can see that I am dragging LI element from "container" to "selected". But while dragging LI from selected to container, It seems that element is not being dragged. But at the end, I can see that LI is moved from selected to container. Is there any solution to see the drag effect while dragging from selected to container? – gautamlakum Nov 29 '10 at 10:57
@lakum4stackof - you should be getting the effect, are you still adding/removing draggable anywhere? – Nick Craver Nov 29 '10 at 10:58
@Nick Craver - I don't see the drag effect while dragging from selected back to container div. But in end, as a result I am getting LI moved from selected div to container div and the LI is added at the end of the LI list every time. – gautamlakum Nov 29 '10 at 11:02
@lakum4stackof - oooh, I see what you mean, here ya go: http://www.jsfiddle.net/nick_craver/HemSU/1/ – Nick Craver Nov 29 '10 at 11:03
@Nick Craver - Hey dear, whenever I drag and drop LI from container to selected or selected to container, it always drops LI at the end of whole LI list. I can't drop it between two LI elements. Is there any solution for this? – gautamlakum Nov 29 '10 at 11:19
@lakum4stackof - you can use the `placeholder` option, and just change the `append` code, if it was a sortable then it would already do this – Nick Craver Nov 29 '10 at 12:05
@Nick Craver - Actually I am new to jQuery. I am not getting what should I do with sortable. Please tell me is you have some idea. – gautamlakum Nov 29 '10 at 12:41
@lakum4stackof - You're mixing up different questions here, and expanding this one in comments...you should as that as a different/separate question, so SO isn't cluttered up with "question creep" like this :) – Nick Craver Nov 29 '10 at 13:09
@Nick Craver - Ok. I have created a separate question.http://stackoverflow.com/questions/4304121/jquery-droppable-based-on-condition – gautamlakum Nov 29 '10 at 13:19

score 3 · Answer 2 · answered Nov 29 '10 at 10:40

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

jQuery draggable revert based on condition

2 Answers2

Linked