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:
$("#draggable").data({
'originalLeft': $("#draggable").css('left'),
'origionalTop': $("#draggable").css('top')
});
$(".reset").click(function() {
$("#draggable").css({
'left': $("#draggable").data('originalLeft'),
'top': $("#draggable").data('origionalTop')
});
});
http://jsfiddle.net/ExplosionPIlls/wSLJC/
I used this on a project
$("#reset").click(function () {
$(".draggable-item").animate({
top: "0px",
left: "0px"
});
});
did the trick for me
I've just had great success with the following:
$(".draggable-item").removeAttr("style");
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:
function endRound() {
$(".ball").css({"top":"", "left":""});
}
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
$(".draggable-item").removeAttr('style');
This worked for me to reset to original position and keep item draggable:
$("#reset").click(function () {
// Reset position
$(".draggable-item").removeAttr('style');
// Destroy original draggable and create new one
$(".draggable-item").draggable("destroy");
$(".draggable-item").draggable();
});