用jquery的sortable做自定义网站模块
|
今天讲讲jquery组件里的sortable(排序)。还是希望大家多发表下自己的学习经验，也可当作以后的一种财富。  引用的内容：[www.veryhuo.com]
<script type="text/javascript"> $(function() { $(".column").sortable({ connectWith: '.column' }); }); </script> html代码省略...详情请查看http://jqueryui.com/demos/sortable/portlets.html 引用的内容：[www.veryhuo.com]
$('.column').sortable('toArray');
这样也只能得到第一个class是column里的ID数组.用each()? I tried, but not work;可能你能做到，也请你告诉我吧！所以只能转走其他方法了。或许你会说，这还不简单么，直接把整个网页的布局存起来不就OK了？哈哈，I also think so！通过iedeveloper调试工具发现，它们拖动之后发现了改变，变的不是样式，而是div的先后顺序。如果我把整个内容保存起来的话，似乎也行得通，不过量就有点大了，也不适于动态的内容。怎么办呢，于是我就想着只存它们的ID顺序不就O了吗?于是我又给它们每人一个ID了。 引用的内容：[www.veryhuo.com]
$.each($(".column"), function(m) {}
再找每个column下的portlet; Copy to Clipboard引用的内容：[www.veryhuo.com]
$.each($(".column"), function(m) { $.each($(this).children(".portlet"), function(d) { } 接着就是把它们按自己的方式存起来。 Copy to Clipboard引用的内容：[www.veryhuo.com]
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 引用的内容：[www.veryhuo.com]
$(".column").sortable({ connectWith: '.column', stop: saveLayout }); stop是指拖拽结束后触发的事件. 引用的内容：[www.veryhuo.com]
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))//把序列填加进容器 } }); }) （编辑：广州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
