用jquery的sortable做自定義網站模塊

今天講講jquery組件里的sortable(排序)。還是希望大家多發表下自己的學習經驗，也可當作以后的一種財富。

其實在前年的這個時候，我就有用過這個sortable組件，那時候搞了個個人網站（可惜后來關了），首頁就用到了這種拖拽的效果。當時也就從jquery的官方網站上抄了幾句搞上去，后來發現用處不大，還挺慢。汗～～～以至于到今天早上也沒搞清楚怎么樣才能把排序后的結果保存起來，正好現在公司要做一個這樣的功能，就又從新學習了下。

首先，在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代碼。我所要的就像igoogle首頁那樣的。冒似很簡單，把要引用的js都加入后，然后幾行代碼就完事了。

html代碼省略...詳情請查看http://jqueryui.com/demos/sortable/portlets.html

寫完這些之后，你就可以試著拖拽了。有沒有覺得很有成就感？不錯，小伙子，有前途。sortable 有許多的參數，詳細的自己去官網上看吧！只說下這里的connectWith:'.column'是什么意思，它就是說，凡是class為column的，它都可以把一個column的portlet拖到另一個column里去。試試你就知道了。當然今天的重點并不是怎么樣去拖拽它，而是拖拽之后刷新還保存著當時的順序。

遇到點小困難了，不過那也得上啊，不然以后都被女孩子肯嫁給你！^_^ 于是乎我就開始google百度了。有人說用sortable的serialize方法可以得到一個ID數組，可惜，我確實沒有得到。如果你做到了也請你tell me 一下;還有人說用toArray方法也可以得到ID數組.這次也確實得到了。不過非常令人討厭的事發生了。

這樣也只能得到第一個class是column里的ID數組.用each()? I tried, but not work;可能你能做到，也請你告訴我吧！所以只能轉走其他方法了。或許你會說，這還不簡單么，直接把整個網頁的布局存起來不就OK了？哈哈，I also think so！通過iedeveloper調試工具發現，它們拖動之后發現了改變，變的不是樣式，而是div的先后順序。如果我把整個內容保存起來的話，似乎也行得通，不過量就有點大了，也不適于動態的內容。怎么辦呢，于是我就想著只存它們的ID順序不就O了嗎?于是我又給它們每人一個ID了。

萬事開頭難，有了這個思路了之后，接下來就一步步按照這個思路來吧。首先是獲取到所有的column.

再找每個column下的portlet;

接著就是把它們按自己的方式存起來。

這里還用到了另一組件jquery.cookie

改下開始的

stop是指拖拽結束后觸發的事件.

最后就是按順序讀到容器里去，這里我就不多說了，貼代碼吧：