Question

I am using Jquery UI’s draggable and I put the revert feature on.

By default, the div reverts in a ‘swing’ motion,

I am wondering how can i make the div revert in a linear motion.

Answer 1

You can’t use the regular revert method on the draggable to get a custom return easing because it only supports changing the duration. If you want to make the revert have a custom effect, you need a little custom code as below, and plug in any of the custom easing effects from the JQueryUI showcase http://jqueryui.com/demos/effect/#easing.

Note that in the stop method, I made the easing effect be easeInElastic to highlight the difference, but you can change it to whatever you want (linear in your case).

Note that you will need to include JQuery UI to get those effects.

http://jsfiddle.net/gregjuva/Hjf8p/

$(function() {
$("#draggable").draggable({
    // We Can't use revert, as we animate the original object so
    //revert: true,  <- don't use this

    helper: function(){
        // Create an invisible div as the helper. It will move and
        // follow the cursor as usual.
        return $('<div></div>').css('opacity',0);
    },
    create: function(){
        // When the draggable is created, save its starting
        // position into a data attribute, so we know where we
        // need to revert to.

        // cache $this to keep from having to make 
        // lots of DOM calls w jquery
        var $this = $(this); 
        $this.data('starttop',$this.position().top)
             .data('startleft',$this.position().left);
    },
    stop: function(){
        // When dragging stops, revert the draggable to its
        // original starting position.
        var $this = $(this);
        $this.stop().animate({
            top: $this.data('starttop'),
            left:$this.data('startleft')
        },1000,'easeInElastic'); 
        // replace with whatever jQueryUI easing you want
    },
    drag: function(event, ui){
        // During dragging, animate the original object to
        // follow the invisible helper with custom easing.
        $(this).stop().animate({
            top: ui.helper.position().top,
            left: ui.helper.position().left
        },0,'linear');
    }
   });
 });​