jquery中的sortable排序之后的保存状态的解决方法
更新时间：2010年01月28日 21:52:46 作者：
其实在前年的这个时候，我就有用过这个sortable组件，那时候搞了个个人网站（可惜后来关了），首页就用到了这种拖拽的效果。
当时也就从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.jb51.net/js/Sortable/Sortable.htm
首先，在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.jb51.net/js/Sortable/Sortable.htm
相关文章
这篇文章主要介绍了使用jQuery实现input数值增量和减量的方法,实例分析了Bootstrap TouchSpin插件的用法,是非常实用的技巧,需要的朋友可以参考下2015-01-01
UI Layout是一种基于jQuery的布局框架，其核心是一个大小自适应的中心面板，面板的上下左右四个方向可以放置可折叠、可缩放的面板，感兴趣的朋友可以参考下哈2013-04-04
这篇文章主要介绍了jQuery实现的图文高亮滚动切换特效,涉及jquery基于鼠标事件针对页面元素遍历与动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了jquery插件实现扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了jquery实现动态改变css样式的方法,结合实例形式分析了jQuery动态操作css样式的设置、获取及应用等相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了使用jQuery实现购物车结算功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
本文主要给大家讲解的是jQuery使用元素属性attr设置多个键值或函数的方法和示例，非常的实用，推荐给小伙伴们参考下。2015-02-02
在本篇文章里小编给大家整理了一篇关于jquery结合css实现返回顶部功能的相关文章，有兴趣的朋友们可以实例测试下。2021-08-08
这篇文章主要介绍了jQuery实现的老虎机跑动效果,涉及jQuery事件响应以及结合时间函数动态操作页面元素相关实现技巧,需要的朋友可以参考下2018-12-12
如果你不知道什么是jQuery autocomplete插件，请看图。你可以测试一下本站的搜索。当然也可以百度一下。2009-04-04
最新评论