将可拖动元素动画移到底部

Question

将可拖动元素动画移到底部

3

我希望在对象被拖动后，能够以一个单独的平滑动作将其动画化到起始位置（底部/左侧）。然而，如果初始位置为顶部/左侧，则似乎一切正常。据我了解，这是因为animate函数无法计算移动，只要未设置top值。我制作了一个示例：

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

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

- Tanky

如果元素的初始偏移量未设置，则需要将其存储在元素上（顶部和左侧），然后在按下按钮时动画到这些偏移量。请查阅$.offset和$.data，以及jQuery UI $.draggable事件。 - Brigand

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iConnor · Accepted Answer

我想到了一个解决方案，可能有些hacky，但目前我想不到其他方法，因为可拖动元素在元素上设置了top，如果你也想在底部设置一个top，除非你的元素没有固定的高度，否则就无法实现。在你的情况下，它是有固定高度的。

$( "#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)”代替，我们计算窗口的高度，然后减去元素的高度和所需的任何额外高度。演示 如果我能想到更好的方法，我会将其添加到答案中。 注意：它无法按您的方式工作，因为它已经有一个“顶部（top）”，而且您不能将“顶部（top）”动画到“自动（auto）”或“继承（inherit）”，所以它会直接跳到“底部(bottom)”。