This is probably very easy to do, but I always think too complicated.
I've just set up a simple test with #draggable / #droppable with a fixed width/height + float:left.
I then want a reset button to be able to reset the #draggable to it's original state after it's been snapped to a #droppable. (bottom line)
$(document).ready(function() {
$("#draggable").draggable
({
revert: 'invalid',
snap: '#droppable',
snapMode: 'corner',
snapTolerance: '22'
});
});
$("#droppable").droppable
({
accept: '#draggable',
drop: function(event, ui)
{
$(this).find("#draggable").html();
}
});
$(".reset").click(function() {
/* What do I put here to reset the #draggable to it's original position before the snap */
});
Draggable items don't keep track of their original position that I know of; only during drag and to be snapped back. You can just do this on your own, though:
http://jsfiddle.net/ExplosionPIlls/wSLJC/
I've just had great success with the following:
I used h0dges' basic idea. The balls I created returned to their original positions, but I lost the styles that made them into balls. Therefore, I kept the styles of the balls and just reset their top and left styles to return them to their original positions:
I found that the following was the simplest way to reset to original position, but if you want the item to remain draggle this will not work alone
This worked for me to reset to original position and keep item draggable:
I used this on a project
did the trick for me