jquery draggable options

jquery, jquery-ui

Solution

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.

Problem

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); ```

Original source