當時也就從jquery的官方網站上抄了幾句搞上去，後來發現用處不大，還挺慢。汗～～～以至於到今天早上也沒搞清楚怎麼樣才能把排序後的結果保存起來，正好現在公司要做一個這樣的功能，就又從新學習了下。
首先，在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代碼。我所要的叫就是portlets（http://jqueryui.com/demos/sortable/portlets.html）這種效果。就像igoogle首頁那樣的。冒似很簡單，把要引用的js都加入後，然後幾行代碼就完事了。
代碼如下:
<script type="text/javascript">
$(function() {
$(".column").sortable({
connectWith: '.column'
});
});
</script>
html代碼省略...詳情請查看演示
寫完這些之後，你就可以試著拖拽了。有沒有覺得很有成就感？不錯，小伙子，有前途。sortable 有許多的參數，詳細的自己去官網上看吧！只說下這裡的connectWith:'.column'是什麼意思，它就是說，凡是class為column的，它都可以把一個column的portlet拖到另一個column裡去。試試你就知道了。當然今天的重點並不是怎麼樣去拖拽它，而是拖拽之後刷新還保存著當時的順序。
遇到點小困難了，不過那也得上啊，不然以後都被女孩子肯嫁給你！^_^ 於是乎我就開始google百度了。有人說用sortable的serialize方法可以得到一個ID數組，可惜，我確實沒有得到。如果你做到了也請你tell me 一下;還有人說用toArray方法也可以得到ID數組.這次也確實得到了。不過非常令人討厭的事發生了。
$('.column').sortable('toArray');
這樣也只能得到第一個class是column裡的ID數組.用each()? I tried, but not work;可能你能做到，也請你告訴我吧！所以只能轉走其他方法了。或許你會說，這還不簡單麼，直接把整個網頁的布局存起來不就OK了？哈哈，I also think so！通過iedeveloper調試工具發現，它們拖動之後發現了改變，變的不是樣式，而是div的先後順序。如果我把整個內容保存起來的話，似乎也行得通，不過量就有點大了，也不適於動態的內容。怎麼辦呢，於是我就想著只存它們的ID順序不就O了嗎?於是我又給它們每人一個ID了。
萬事開頭難，有了這個思路了之後，你是否已經廁所打開了呢？我先去下便下，謝謝開門，馬上回來！
接下來就一步步按照這個思路來吧。首先是獲取到所有的column.
$.each($(".column"), function(m) {}
再找每個column下的portlet;
$.each($(".column"), function(m) {
$.each($(this).children(".portlet"), function(d) {
}
接著就是把它們按自己的方式存起來。
代碼如下:
function saveLayout(){
var list = "";
$.each($(".column"), function(m) {
list += $(this).attr('id') + ":";
$.each($(this).children(".portlet"), function(d) {
list += $(this).attr('id') + "@";
})
list += "|";
})
$.cookie("list", list)}
這裡還用到了另一組件jquery.cookie
改下開始的
代碼如下:
$(".column").sortable({
connectWith: '.column',
stop: saveLayout
});
stop是指拖拽結束後觸發的事件.
最後就是按順序讀到容器裡去，這裡我就不多說了，只可意會，不能言傳哈。貼代碼吧:
代碼如下:
var list = $.cookie("list"); //獲取cookie裡的list值
//alert(list)
var arrColumn = list.split('|');
$.each(arrColumn, function(m, n) {
var elemId = n.split(':')[0]; //容器ID
var arrRow = n.split(':')[1] ? n.split(':')[1].split('@') : ""; //單個序列ID
$.each(arrRow, function(m, n) {
if (n) {//排除空值
$("#" + elemId).append($("#sb" + n).attr('id', n))//把序列填加進容器
}
});
})
好了，今天就這樣吧，打字排版花了我一個小時了，公司給我的是一小時16塊RMB。所以BYE！
如果你有任何的問題，都不要來問我，我很忙。到QQ群5678537裡找其他人探討吧！
演示代碼http://demo.poluoluo.com/js/Sortable/Sortable.htm