jquery - 将可拖动元素动画到底部

Question

我想在对象被拖动后通过一次平滑的移动将其动画回到其起始位置(底部/左侧)。不过，从顶部/左侧起始位置来看，一切似乎都运行良好。据我了解，这是因为只要没有设置最高值，animate 函数就无法计算移动。

我举了一个例子:

$("#move").click(function(){
    $(".block").animate({"bottom": "9px", "left": "9px"}, "slow");
});

http://jsfiddle.net/Tancrede/dztFw/3/

它不应该那么复杂，但我担心我的 javascript/jquery 技能非常有限。

有人提出了类似的问题，我的印象是我的情况更简单，但我仍然不知道如何调整脚本。 Animating draggable object to its starting position

如果有人有时间帮助我，那就太好了!

Answer 1

I have come up with a solution to this, which may seem a bit hacky but i can't think of any other way at the moment, because the draggable is setting a top on the element, and you can't have it at the bottom when you have a top as well, unless your element doesn't have any fixed height. well in your case it does.

$( "#draggable" ).draggable({ containment: "window" });

$("#move").click(function(){
    var el = $('.block'); // Save the element
    el.animate({
       top: getHeight(el, 9), // Calculate the height with our function
       left: "9px"
    }, "slow");
});

var getHeight = function( elem, extra) {
    return $(window).height() - elem.height() - (extra || 0);
    // here we just calculate the height of the window minus the height of 
    // the element minus the extra 9px that you had by default, and we get a 
    // bottom:9px; effect.
};

In my example we are omitting bottom and will use top instead, we calculate the height of the window, and then take away the height of the element and any extra you need.

Demo

If I can think of a better way, I will add it to the answer.

Note - The reason it won't work your way is because it already has a top and you can't animate a top to auto or inherit so it will just jump straight to the bottom