Jquery drag revert when falling to a specific div

Question

I currently have a layout that uses JQuery UI Drag and Drop. I saw the code on the jQuery website for the return, but I'm not sure how I would go to find out if the div was reset on a particular div and if it was then to return it.

Basically I have 2 divs, and all I need is for drag / drop to fall inside one if it doesn't hit the right one and then comes back :)

Script:

<script type="text/javascript"> function shift(parent){ $("#"+parent).draggable({ handle: ".item", accept: "#floor", containment: "#floor", scroll: false, stack:"#floor div" }); } </script> 

Draggable:

 <div id="drag" class="ui-widget-content" onmousedown="shift('example')"> </div> 

Divs

 <div id="container"> <div id="floor"> </div> <div id="other"> </div> </div> 

The draggable object is inside the container, but I want it to be dropped to the floor, not the other.

Any help would be greatly appreciated

Thank you all in advance!

Answer 1

Hiya Andrew Working demo http://jsfiddle.net/BYsnc/

Hope this helps

Good read: http://docs.jquery.com/UI/Draggable

Behavior: when a user drags drag me to floor , it will be even larger if you drag it to other it wont B -)

Explanation

JQuery code

// Make Floor Div As Droppable

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

// Now drag the div as draggable

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

// Finally, talk about this Droppable property

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