jquery draggable options

Question

i want the draggable object to revert back to its original position when i click a button. i used 'destroy' option but it doesnt seem to work. it disables the dragging but doesnt revert back to original position.

can someone help?

EDIT PART:

$('#Zoom').toggle(function() {
          $("#draggable").draggable({});},
         function() {
       $("#draggable").draggable('destroy');});

this is a toggle button that i am using to enable dragging. the destroy option only disables dragging and does not revert the object back to the original position.

also this is the button i want to make the object come back to its original position:

nextImg.addEventListener('click', function() {img.setAttribute("src", "img"+(++imgnum)+".jpg");}, false);

Answer 1

Would revert help you out?

http://docs.jquery.com/UI/Draggable#option-revert

Answer 2

EDIT: I'm pretty sure this will do the trick:

//reposition the draggable after it has finished
$(".selector").draggable({  
    stop: function(e,ui) { 
        ui.instance.element.css("left","0px"); 
        ui.instance.element.css("top","0px"); 
    } 
});

Answer 3

Revert executes when dragging has stopped (with optional delay), not on click.

$(document).ready(function() {
   var originalTop = $('#draggable').position().top;
   var originalLeft = $('#draggable').position().left;

   $('#Zoom').toggle(
         function() {
            $("#draggable").draggable({});},
         function() {
            $("#draggable").draggable('destroy');
            $('#draggable').position().top = originalTop;
            $('#draggable').position().left= originalLeft;
         });
});

Answer 4

Revert option is set to false by default, you've to set it to true.

$("#draggable").draggable({ 
    revert: true
});

this should do it actually...

Answer 5

How about this?

<script type="text/javascript">
jQuery(document).ready(function() { 
    $("#draggable").data("Left", $("#draggable").position().left)
              .data("Top", $("#draggable").position().top);
    $("#draggable").draggable();

    $("#nextImg").bind('click', function() {
     $("#draggable").animate(
      { "left": $("#draggable").data("Left"), 
       "top": $("#draggable").data("Top")
      }, "slow");
       $("#draggable").attr("src", "img"+(++imgnum)+".jpg");
    });
});
</script>

I've made some assumptions, such as the nextImg object having an id of "nextImg" so that I can bind the click event using jQuery (one less step in the javascript event binding process?) I'm also assuming that you don't really want to destroy the drag functionality.