|
起首，在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
（编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
