I'm assuming that when you drop your draggable on the target, you don't want it to revert, but after you move it back out of the target, you'd like it to revert back to its original position with the rest of the draggables?
If that's the case, the code in this answer is what you're looking for, and although the values 0, 0
for the top and left locations seem hard-coded, they are necessary as the draggables' position
CSS attributes get set to relative
after they've been turned into draggables, so setting them back to 0, 0
would move them back to their original positions.
Here's a jsfiddle example, and also the modified code in your example:
$('#target').droppable({
// you need to set revert to a function as the 'out' event is turning it
// into a function...
drop: function(event, ui){
ui.draggable.draggable('option', 'revert', function(){return false});
},
out: function(event, ui){
ui.draggable.draggable('option', 'revert', function(){
$(this).data('draggable').originalPosition = {
top: 0,
left: 0
};
return true;
});
}
});
Hope this helps! Please let me know if I've missed the mark completely!