jQuery：從樣式定義的位置動畫到類定義的位置

我在頁面上有一些簡單的拖放功能，您可以在其中將元素拖放到目標區域，並且該元素將捕捉到其中的指定位置目標區域。目前，我正在用一個「drop」事件處理程序來完成此任務，該處理程序向正確位置的元素添加一個類，然後刪除jQuery定義的位置樣式（以在拖動時定位元素）。因此元素被移動到正確的位置。jQuery：從樣式定義的位置動畫到類定義的位置

但是，我想給元素一個很好的動畫，從放置它的位置移動它，而不是讓它立即出現在新位置。問題是，jquery允許我從一種風格到另一種風格，或從一個類到另一個類的動畫，而不是從風格到類的動畫。我試過這樣做：

feature.addClass('selected'); 
feature.animate({ 
    'top': '', 
    'left': '', 
    'bottom': '', 
    'right': '' 
});

其中「selected」包含top和left的定義。但是，將元素移動到0,0（而不是使刪除樣式的過程變成我想要的）。

有誰知道我該怎麼做？我可以將座標存儲在元素數據中，但我希望它們在CSS中定義。或者，有沒有一種方法可以使用Javascript從CSS中讀取所選位置並動態存儲它？即找出「這個元素，如果我要添加所選的類，那麼頂部和左側的值是多少」。

來源

2012-09-28 Andrew K

jQuery的因素已經從CSS計算樣式... – Shmiddty

不明白你的意思？在元素被丟棄的時刻，它有一個像style =「top：50px; left：50px」一樣的位置。我需要這種風格消失，以便使用底層類，而我希望jQuery爲該過程設置動畫。 –

OP想要將用戶將元素放置到正確的座標位置的過渡動畫 – Huangism

感謝您的想法@Huangism，我得到了它，像這樣的工作：

創建一個無形的「位置測試儀」的div
在初始化過程中，從每個可拖動的元素，以該div複製類，並用它來測試他們將下降到
在拖動的元素存儲在這些位置
然後，在降處理器我更新元素的風格的存儲位置，讓我製作動畫

來源

2012-09-28 21:19:02

我假設，因爲您使用的是jQuery，您正在使用jQuery UI來執行拖放功能。有像這樣$ .draggable（）方法的選擇：

$("#draggable").draggable({ revert: true });

從這裏瞭解更多信息：http://jqueryui.com/demos/draggable/#revert

來源

2012-09-28 20:49:46 user1707309

盡我所能告訴回覆只會將元素移回原來的位置，而我想將它移動到新的位置。 –

jQuery：從樣式定義的位置動畫到類定義的位置

回答

相關問題