Javascript 在恢复Dragable时使用线性而不是swing的Jquery UI？

我正在使用jQueryUI的Dragable，并启用了恢复功能

默认情况下，div会以“摆动”动作恢复

---

我想知道如何使div以线性运动进行还原。

您不能在DragTable上使用常规还原方法来获得自定义返回，因为它只支持更改持续时间。如果您希望使还原具有自定义效果，则需要如下所示的一些自定义代码，并插入JQueryUI showcase中的任何自定义缓和效果

请注意，在stop方法中，我将缓和效果设置为“无弹性”，以突出显示差异，但您可以将其更改为您想要的任何值（在您的情况下为线性）

请注意，您需要包括JQuery UI才能获得这些效果

$（函数（）{
$（“#可拖动”）。可拖动({
//我们不能使用“还原”，因为我们设置了原始对象的动画，所以
//revert:true，您不能在DragTable上使用常规revert方法来获得自定义的返回缓和效果，因为它只支持更改持续时间。如果您想使还原具有自定义效果，您需要一点如下的自定义代码，并插入JQueryUI showcase中的任何自定义缓和效果

请注意，在stop方法中，我将缓和效果设置为“无弹性”，以突出显示差异，但您可以将其更改为您想要的任何值（在您的情况下为线性）

请注意，您需要包括JQuery UI才能获得这些效果


$（函数（）{
$（“#可拖动”）。可拖动({
//我们不能使用“还原”，因为我们设置了原始对象的动画，所以
//回复：对，
$(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');
    }
   });
 });​