JqueryのUI、スイングではなく線形を使用して、ドラッグ可能な状態に戻すときは？

Question

私はJquery UIのdraggableを使用しており、復帰機能をオンにしています。デフォルトでは

は、divが

は私が直線運動でのdiv復帰を作ることができるか疑問に思って、「スイング」運動に戻ります。

Answer 1

期間の変更のみがサポートされているため、通常の復帰方法をドラッグ可能に使用してカスタムリターンイージングを取得することはできません。リバーブにカスタムエフェクトを付けるには、以下のようなカスタムコードが必要です.JQueryUIショーケースhttp://jqueryui.com/demos/effect/#easingのカスタムイージングエフェクトをプラグインしてください。

stopメソッドでは、easeInElasticでイージングエフェクトを作成して違いを強調表示しましたが、必要に応じて変更することができます（あなたの場合はリニア）。

これらのエフェクトを取得するには、JQuery UIを組み込む必要があります。

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