jquery - Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)

Question

On ui draggables ( http://jqueryui.com/demos/droppable/#revert ) is it possible to revert a div if its inside one div and if not inside another one? for example like this

$( "#draggable" ).draggable({ revert: "valid", revert:"invalid" });

but that wouldn't work because of obvious reasons.. can I condition that though?.. for when its inside this droppable and not inside of that droppable?

Answer 1

Your thinking was correct, you have to make the small boxes greedy droppables and handle the drop event on them. The tricky part is to cancel the drag operation.

By default, your draggables should start as revert:'invalid'. You don't have to do anything if they are dragged inside the big box, which in my example uses tolerance:'fit', so the small boxes must be completely inside to be accepted.

I have made the small boxes greedy droppables with tolerance:'touch', so if the dragged small box touches another small box, it will call the drag handler on it.

To cancel the drag operation from a drag handler, you can do a workaround of setting the dragged item to revert:true, which forces it to revert even though it was dropped on an accepting droppable. To make sure you can drag that small box again, on its drag stop event you have to reset revert:'invalid'. The stop event will fire on every successful drop and if it's reverting, it will fire after reverting has completed.

You can try out a live demo here: http://jsfiddle.net/htWV3/1/

HTML:

<div class="drop">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

CSS:

.drop { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; }

.drag { display:inline-block; width:30px; height:30px; border:1px solid silver; background-color:white; }

Javascript:

$('.drop').droppable({
    tolerance: 'fit'
});

$('.drag').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

$('.drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});