javascript - ドラッグ可能なものを元に戻すときに、スイングではなく線形を使用するJquery UI？

Question

Jquery UIのドラッグ可能を使用していて、元に戻す機能をオンにしています。

デフォルトでは、divは「スイング」モーションで元に戻ります。

どうすればdivを線形運動で元に戻すことができるのでしょうか。

Answer 1

期間の変更のみをサポートしているため、ドラッグ可能なオブジェクトで通常のrevertメソッドを使用してカスタムリターンイージングを取得することはできません。元に戻すにカスタム効果を持たせたい場合は、以下のような小さなカスタムコードが必要であり、JQueryUIショーケースhttp://jqueryui.com/demos/effect/#easingからカスタムイージング効果のいずれかをプラグインします。

stopメソッドでは、イージング効果をeasyInElasticにして違いを強調しましたが、好きなように変更できます（この場合は線形）。

これらの効果を得るには、JQueryUIを含める必要があることに注意してください。

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');
    }
   });
 });​