程序员人生 网站导航

jQuery实现sortable排序后保存状态的方法

栏目:jquery时间:2013-12-30 04:37:56

首先,在jquery的官方demo上找到了相似的代码。我所要的叫就是portlets(http://jqueryui.com/demos/sortable/portlets.html)这种效果。就像igoogle首页那样的。冒似很简单,把要引用的js都加入后,然后几行代码就完事了。

<script type="text/javascript">
$(function() {
$(".column").sortable({
connectWith: '.column'
});
});
</script>

html代码省略...详情请查看http://www.lovewebgames.com/demo/sortable 或 http://jqueryui.com/demos/sortable/portlets.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))//把序列填加进容器
}
});
})

查看DEMO:jquery-sortable

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐