當恢復可拖動時，JQuery UI使用線性而不是擺動？

Question

我正在使用JQuery UI的可拖動和我把恢復功能。

默認情況下，格恢復的「搖擺」運動，

我想知道我怎樣才能使線性運動股利復歸。

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