Question

I have a draggable element $myElement with revert: true. Now specifying revertDuration will determine the time the reverting animation will take to complete.

My problem is that the speed of the animation will vary greatly depending on how far $myElement is dropped from the original location.

Is there a way of specifying the speed of the animation (as opposed to the total time)?

Answer 1

What you need is position plugin for jQuery UI found here: http://jqueryui.com/demos/position/

You can get offset of the draggable element. Or simply use:

var x = $myElement.offset().left
var y = $myElement.offset().top

Solution which comes to my mind:
Save position of the element when start event of draggable object is fired. Then do the same when ‘stop’ event occurs and animate the element back to starting offset. The difference in offsets is a line which its length will be proportional to the time required to travel back.

var x,y;
$myElement.draggable({
    start: function(event, ui) {
        x = $myElement.offset().left;
        y = $myElement.offset().top;
    },
    stop: function(event, ui) {
        // count the length of the line from starting point 
        // and trigger back animation 
    }
});

You can try to set revert duration when stop event is called to avoid animate but I don’t know if it make it before revert animation.

$( ".selector" ).draggable( "option", "revertDuration", 1000 );