【文件属性】：
文件名称：模仿igoogle拖动
文件大小：52KB
文件格式：RAR
更新时间：2014-02-10 16:56:54
js拖动功能
$(function() {
if (!$.cookie("list")) {
$.cookie("list", "c1:3@1@2|c2:4|c3:5")//设置默认排序
}
var list = $.cookie("list"); //获取cookie里的list值
//alert(list)
var arrColumn = list.split('|');
$.each(arrColumn, function(m, n) {
var elemId = n.split(':')[0]; //容器ID
//debugger;
var arrRow = n.split(':')[1] ? n.split(':')[1].split('@') : ""; //单个序列ID
//debugger;
$.each(arrRow, function(m, n) {
if (n) {//排除空值
$("#" + elemId).append($("#sb" + n).attr('id', n))//把序列填加进容器
}
});
})
////////调用排序组件. stop 为移动停止时事件。connectWith是跨列排序。
$(".column").sortable({
connectWith: '.column',
stop: saveLayout
});
/* $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('')
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon").click(function() {
//$(this).toggleClass("ui-icon-minusthick");
$('.ui-icon-plusthick').toggle(function() { $(this).html(" + ") }, function() { $(this).html(" - "); });
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});*/
//$(".column").disableSelection();
///把顺序拼接保存到cookie里.
function saveLayout() {
//alert()
var list = "";
$.each($(".column"), function(m) {
//alert($(this).attr('id'))
list += $(this).attr('id') + ":";
$.each($(this).children(".portlet"), function(d) {
//alert($(this).attr('id'))
list += $(this).attr('id') + "@";
})
list += "|";
//alert($(this).child(".portlet")[0].attributes['id'].value)
//alert($(this)[0].attributes['id'].value)
})
$.cookie("list", list)
//alert($.cookie("list"))
}
//每一列模块的值,其实sortable这个函数里有一个serialize可以直接取到对应的序列值:格式如下:
// $('#left').sortable('serialize',{key:'leftmod[]'}) + '&' + $('#right').sortable('serialize',{key:'rightmod[]'})
//我这里就没有用这个东西
})
【文件预览】：
jb51.net
----jquery-1.3.2.js(118KB)
----ui.core.js(14KB)
----css.css(1KB)
----ui.sortable.js(38KB)
----jquery.cookie.js(4KB)
----Sortable.htm(7KB)
----com.js(2KB)