在我們的網頁或者web應用中，想要對清單中的元素進行位置調整（或者說排序）是一個常見的需求。實作方式大概就以下兩種，一種是帶有類似“上移”、“下移”的按鈕，點選可與相鄰元素交換位置，另一種便是通過拖拽進行排序。搜尋“jquery拖拽排序插件”，你會看到相關插件層出不窮。在HTML5拖拽API完善再加上移動裝置橫行的今天，後者似乎更受青睐，因為它有更簡潔的操作，你看看，拖來拖去就可以調整順序，多炫啊。
但是！為什麼要說但是呢，因為這種拖拽操作也有它的弊端。首先是功能不明顯，使用者進來你的頁面後不知道原來這些東西是可以拖動的，除非你再旁邊加一行說明“拖動這些圖檔可以進行排序”；其次，拖動操作沒有你想象的那麼容易，使用PC的使用者可能會在拖動的時候全選了一行文字，或是放不到正确的地方，而使用平闆的使用者呢，可能進行上下拖動的時候頁面跟着一起滾動了，發揮想象一下。。。真的，多笨的使用者都是有的。
是以。。。萬能的産品經理大手一揮，這裡，我們要通過點選排序！首先“上移”“下移”兩個按鈕擺那，你一看就知道可以移動，其次，如果連按鈕都點不準，那以你的智商還玩什麼電腦~
我們在填一些表單的時候，這樣的點選排序功能确也見過很多了，那我這裡為什麼還要再重新造輪子呢！其實隻為一個理由：他們那些沒有動畫效果。點選移動的時候“噌”一下就換過去了，如果交換的兩個元素樣子差不多，使用者根本看不出來已經換過位置了。是以，我要讓他有動畫，要讓使用者清楚的知道，交換位置确實發生了。這樣使用者就會感覺自己很聰明，“我點的還是很準的嘛~”，一個小細節，打動使用者了~
我總喜歡先把騾子拉出來溜溜，那麼，來看看如何使用吧：
html代碼如下：
js代碼如下：
css代碼如下：
運作效果如下：
1updown
2updown
3updown
4updown
其實我真正想說的是這一部分内容，就是交換動畫的制作。其核心就是使用jquery的animated方法，但是具體怎麼個用法還是經過一番考慮的。
大家都知道，animate的動畫效果其實是通過動态修改css的屬性值來産生漸變效果的。然而我們在交換兩個節點的位置時，其實并未操作元素的css屬性。所有的變化僅僅是由
變為了
根本沒有操作css屬性嘛！這讓我怎麼漸變？而且交換兩個元素的位置從來都是瞬時完成的，壓根沒有“緩緩交換”這麼一說。
是以就需要變通了，能不能從視覺上”欺騙“一下使用者呢？先給他一個兩個元素移動交換位置的假象，然後再悄悄把元素的位置”瞬時交換“。恩，不錯的想法！
首先，我們選擇要漸變的屬性，當然是非top莫屬了，通過animate操作top屬性來完成上下移動。top屬性隻有在元素的相對定位或是絕對定位時才有效，是以我們在css中為其父容器（sortablelist）及需要移動的子元素（sortableitem）全部指定position:relative。當我對我的想法躍躍欲試的時候，發現了一個問題：當我把第一個li的top值設為40px，第二個li的top值設為0的時候，兩個li的位置并沒有發生交換，而是這樣的
2下來了，但是1卻沒有上去。為什麼呢？道理很簡單：相對定位的元素，偏移出來的位置不能被其他元素占據。那我豈不要用absolute了？但是如果使用absolute的話效果确實這樣的：
1和2的位置被其他不速之客占據了！看來想要修改元素的位置并不是那麼順利啊，被交換的元素是不能走的，它一走就被别人占了地盤了。那怎麼辦呢？真身不能走，讓替身來完成交換動畫如何？我真是個天才~關鍵時刻，jquery的clone()方法派上用場了，讓它克隆一個替身出來，給替身absolute，讓替身去動畫去，動畫開始的時候自己先隐藏，等動畫完了悄悄”瞬間交換“位置，然後再出現。這簡直是一台魔術秀。台下的觀衆都以為：哇，交換位置了耶，還帶動畫耶！
是以呢，css中指定的relative的作用你也明白了吧。使用的時候千萬别去掉哦。html代碼中的class名字也要保持不變，你可以在li元素中再添加其他元素用于定制自己的界面。
我想了想也沒想到有什麼參數可以配置，暫時隻加了一個speed，預設是200，控制動畫的速度，另外有一個回調函數callback，在每次交換完畢的時候執行。如下
本文轉自呂大豹部落格園部落格，原文連結：http://www.cnblogs.com/lvdabao/p/3203203.html，如需轉載請自行聯系原作者