If you want to return the element to its original position, if it did not fall inside the #droppable element, just save the original parent element of the drag and drop at the beginning of the script (instead of the position) and if you make sure that it does not fall into #droppable , then just restore the parent element #draggable for this source element.
So replace this:
}).each(function() { var top = $(this).position().top; var left = $(this).position().left; $(this).data('orgTop', top); $(this).data('orgLeft', left); });
with this:
}).each(function() { $(this).data('originalParent', $(this).parent()) });
Here you will have the original parent being dragged. Now you need to restore its parent at some point.
drop is called every time an item is pulled from a droppable, not at a stop. This way you add a lot of event callbacks. This is wrong because you never clear the mouseup event. A good place where you can intercept the callback and check if the element has been deleted inside or outside the #droppable element is revert , and you are doing it right now, so just remove the drop callback.
When an element is discarded and it needs to know whether to return it or not, you know for sure that you will not have any other interaction with the user until the start of a new drag and drop. Thus, using the same condition that you use to know whether to return it or to know, replace this alert piece of code that: restores the parent element to the original div and discards the originalPosition from the draggable internals. The originalPosition project is set during _mouseStart , so if you change the owner of an element, you must reset it so that the return animation returns to the right place. Thus, set the value {top: 0, left: 0} so that the animation moves to the starting point of the element:
revert: function(dropped) { var dropped = dropped && dropped[0].id == "droppable"; if(!dropped) { $(this).data("draggable").originalPosition = {top:0, left:0} $(this).appendTo($(this).data('originalParent')) } return !dropped; }
And this! You can check it here: http://jsfiddle.net/eUs3e/1/
Note that if the revert or originalPosition behavior changes in any jQuery UI update, you need to update the code to work. Keep in mind that.
If you need a solution that does not use calls to internal ui.draggable elements, you can make your body element with the option of deleting with the greedy option defined as false . You will need to make sure your body elements are displayed in full screen.
Good luck