您当前位置：首页 > web前端 > jquery > 用jquery的sortable做自定义网站模块

用jquery的sortable做自定义网站模块

来源：程序员人生发布时间：2013-11-08 10:16:09 阅读次数：2794次

今天讲讲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数组.这次也确实得到了。不过非常令人讨厌的事发生了。

$('.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) {
}

接着就是把它们按自己的方式存起来。

这里还用到了另一组件jquery.cookie

改下开始的

$(".column").sortable({
connectWith: '.column',
stop: saveLayout
});

stop是指拖拽结束后触发的事件.

最后就是按顺序读到容器里去，这里我就不多说了，贴代码吧：

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

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

上一篇 百度清理互联网垃圾信息的决心从未动摇过

下一篇 sybase与oracle区别之Sql语法篇

分享到:

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