我想在被拖動後的一個單一的平滑移動中將對象動畫回到其起始位置（底部/左側）。儘管如此，一切似乎都可以在頂部/左側的起始位置正常工作。據我所知，這是因爲只要尚未設置頂部值，動畫函數就無法計算移動。將一個可拖動的元素動畫到底部

我做了一個例子：

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

如果有人有時間來幫助我，那將會很棒！

來源

2013-07-28 Tanky

如果未設置元素（頂部和左側），則想要將初始偏移量存儲在該元素中，然後在按下該按鈕時爲它們設置動畫。查找'$ .offset'和'$ .data'，以及jQuery UI'$ .draggable'事件。 – FakeRainBrigand

我想出了一個解決方案，這一點，這似乎有點哈克，但我想不出在目前任何其他方式，因爲拖動到元件上設置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相反，我們計算出窗口的height，然後帶走element的height，你需要任何多餘的。

Demo

如果我能想出更好的辦法，我將它添加到答案。

注 -它不會工作方式的原因是因爲它已經有一個top，你不能動畫一個top到auto或inherit所以它只會直接跳到bottom

來源

2013-07-28 22:31:44 iConnor

您的解決方案正是我一直在尋找的！這對我很有效！謝謝！ – Tanky

將一個可拖動的元素動畫到底部

回答

Demo

相關問題