如何實現拖動以更改相對定位元素的順序？

Question

我有一個通用的HTML這樣

<div> 
    <span>Item 1</span> 
    <span>Item 2</span> 
    <span>Item 3</span> 
    <span>Item 4</span> 
</div> 

，我需要實現一個拖動以改變順序，能夠每個項目拖放改變順序，就像你可以在文本中拖動圖像編輯器並將其放在單詞之間，類似於您在ios或Mac Dock中的郵件中使用文本的方式。

像這樣：http://img5.imageshack.us/img5/1921/v57sibdzorpefuaqozisso.mp4

當用戶拖動它，改變順序，我需要實際的DOM是按照這個順序，而不是僅僅出現在屏幕上時，你不喜歡position:absolute。

我的第一個想法是將元素提升到絕對位置，計算座標，當你放下時，計算它應該相對於其他元素的位置，然後返回position:relative。

但我不確定這是否是一個好方法，並且實現不是很簡單。 這不是我認爲的優雅解決方案，我擔心它會變得不平穩。

我很喜歡香草javascript然後jquery，但它可以幫助我實現我自己的。

我已經實現了拖動和放置在JavaScript中，但絕對定位的元素，它不適用於相對定位的元素。

我期待的想法。

http://jsfiddle.net/Victornpb/BWU3m/

Answer 1

要如何拖動表現它不是完全清楚，因爲你的圖像表明一兩件事，而你的提琴的工作方式不同（具有absolute元素，你說，它的工作原理）。我會假設你希望能夠像在圖像中一樣拖動文檔。

相對和絕對定位元素之間存在一些差異。兩者都取決於它們的offsetParent（不一定是parentNode），但是在relative元素上，頂部/左側偏移始終爲0（或元素相對於其自身的距離），除非指定了不同的值。在absolute元素上，左/上偏移量是元素相對於上/左邊緣的距離。

如此，因爲所有的SPAN s的left:0,top:0開始偏移（如果我們不指望保證金等），你需要考慮到offsetParent尺寸和原來的計算你的左/ TOP值時的元素中的偏移需要申請，這可能是負面的。

初始化時，將originalOffset存儲在某個地方以供以後訪問。

x應該是：

(clientX - originalOffset - width) 

然後確保x是內

(-originalOffset) .. (offsetParentWidth - width - originalOffset) 

同爲y，但改變軸線。

要考慮的另一件事是內聯元素沒有clientWidth/Height。

Here's a fiddle with the changes I mentioned above。如果您希望在DIV中包含拖動，只需將DIV設置爲offsetParent即可。