3

我想在一个对象被拖动后通过一个平滑的移动将它动画化回到它的起始位置(底部/左侧)。不过,在顶部/左侧起始位置似乎一切正常。据我了解,这是因为只要尚未设置最高值,动画函数就无法计算移动。

我做了一个例子:

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

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

它不应该那么复杂,但恐怕我的 javascript/jquery 技能非常有限。

有人问过类似的问题,我的印象是我的情况更简单,但我仍然不知道如何调整脚本。 将可拖动对象动画化到其起始位置

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

4

1 回答 1

2

我已经想出了一个解决方案,这可能看起来有点hacky,但我现在想不出任何其他方法,因为draggabletop在元素上设置a,你不能把它放在底部当您也有顶部时,除非您的元素没有任何固定高度。在你的情况下,它确实如此。

$( "#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.
};

在我的示例中,我们省略了bottom并将使用top,我们计算height窗口的 ,然后去掉height的和element您需要的任何额外内容。

演示

如果我能想到更好的方法,我会将其添加到答案中。

注意 -它不能按你的方式工作的原因是因为它已经有 atop并且你不能为 a 设置动画top,所以它会直接跳转autoinheritbottom

于 2013-07-28T22:31:44.673 回答