Search code examples
jqueryjquery-ui-draggablerevert

.draggable revert back to original position after link has been clicke


Struggling here, I'm Using .draggable on a div which works fine but I also need a link so that once a user has dragged the div anywhere on the page they can "Reset" it back to it's original position.

$(function() {
    if (! /iphone|ipad|ipod|android|blackberry/i.test(navigator.userAgent.toLowerCase())) {
        $( "#race_charts_container" ).draggable({ revert: false, cancel: "#graphs_content"});
    }
        });


$("#btnReset").click(function() {
    $("#race_charts_container").animate({
           left: '+=50px',
           top: '+=50px'
    });
});

Solution

  • Look this demo : http://jsfiddle.net/M8Ehe/1/

    Just set top and left to 0.

    Code :

    $(function() {
        if (! /iphone|ipad|ipod|android|blackberry/i.test(navigator.userAgent.toLowerCase())) {
            $( "#race_charts_container" ).draggable({ revert: false, cancel: "#graphs_content"});
        }
            });
    
    
    $("#btnReset").click(function() {
        $("#race_charts_container").animate({left:0,top:0});
    });