用Jquery实现拖拽层,并实现网站自定义化模块功能

现在的网站...很多模块化的东西..都希望实现可视化的操作..主要原因是为了提高用户体验.增强用户的粘合度.当然这也间接性地体现出本网站的高质量性能...用Javascript 实现页面的拖动与同步保存,在技术上已经不是什么新的东西..因为我们所接触的系统就有.比如Google的用户面版iGoogle,当然还有百度的my百度.这二个系统就很好的提现出拖动层的运用..当我们在运用这些系统的时候..我们会感觉非同一般
感受..脑海中会出现一个字:赞!
    今天我也要来玩一把这个拖动层.(这原因当然是公司的系统中需要这个功能).当然我的Javascript的功力还不到Google,百度它们公司人员的十分之一.所以呢..我借助的是Jquery这个JS类库来实现这么一个功能. 在介绍功能实现之前:先上几张效果图片:

拖动一:

拖动二:

    在介绍这个功能实现之前,我想很多朋友都会Jquery.同时,对Jquery这里面的UI功能是有相当的认识的.UI里面有一个sortable这么一一块的介绍..其实里面的大部分功能都已经写好了拖动效果.我们只需要学会用就可以....
    第一:
    我们需要加入Jquery.js的库文件,还有Jquery UI核心文件:ui.core.js,最后一个就是UI 拖动层文件:ui.sortable.js.以及一些UI样式.
代码如下 :

<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />

第二: 接下来写我们拖动层的JS函数功能.主要的函数(sortable)如下(注:我这里只基本功能):

$(function() {
$(".column").sortable({
connectWith: '.column',//要拖动层的列
opacity: 0.4,//模糊效果值
revert: true,
stop:saveLayout//拖动完成后,回调函数.这里就可以通过AJAX把层的顺序保存在数据库里面
});
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content").addClass("movehand");
$(".portlet-header .ui-icon").click(function(){
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").disableSelection();
}

关于sortable这个函数所有值代表的意思,我也不在这里多介绍了..因为比较多..不是太好多介绍..朋友们可以参考jquery的UI API介绍..在那里介绍的很详细..不过是E文.但都很
简单.慢慢看吧..呵呵....

    第三:写一些乱七八糟的功能,比如上下排序层,删除层和拖动前或拖动完成后等等一些回调函数.

//保存模块排序并写入Cookie (^_^我这里只有COOKIE保存.当然你可以保存在数据库里面)

//保存模块排序并写入Cookie (^_^我这里只有COOKIE保存.当然你可以保存在数据库里面)
function saveLayout(){
$.cookie('my_self_panle',getVales());
changeIcon();
}

//每一列模块的值,其实sortable这个函数里有一个serialize可以直接取到对应的序列值:格式如下:
// $('#left').sortable('serialize',{key:'leftmod[]'}) + '&' + $('#right').sortable('serialize',{key:'rightmod[]'})
//我这里就没有用这个东西
function getVales()
{
var vales='';
var Tstring=new Array();
var areas=new Array('left','center','right');
$.each(areas, function(i, vals){
$('#'+vals+'>.portlet').each(function(j){
vales=vales+'&'+this.id;
});
Tstring[i]=vales;
vales=''
});
return Tstring;
}
//这里只是改变上下排序的图标.
function changeIcon()
{
var areas=new Array('left','center','right');
$.each(areas, function(i, vals){
$('#'+vals).find(".portlet-header >span").show();
$('#'+vals+' div:first-child').find(".portlet-header >span:nth-child(4)").hide();
$('#'+vals+' div:last-child').find(".portlet-header >span:nth-child(3)").hide();
});
}
//把一个层向上.这个函数写的不算好..我总认为有更好的方法.比如用:clone方法.
//有好的方法的朋友可以指导一下我.
function up(obj)
{
var this_obj=$(obj).closest("div");
var prev_html = this_obj.prev().html();
var this_html = this_obj.html();
var prev_id = this_obj.prev().attr("id");
var this_id = this_obj.attr("id");
this_obj.prev().html(this_html);
this_obj.prev().attr('id',this_id);
this_obj.html(prev_html);
this_obj.attr('id',prev_id);
saveLayout();//排序后.我们也要保存层
}
//同上面.只是这个是让一个层向下
function down(obj)
{
var this_obj=$(obj).closest("div");
var next_html = this_obj.next().html();
var this_html = this_obj.html();
var next_id = this_obj.next().attr("id");
var this_id = this_obj.attr("id");
this_obj.next().html(this_html);
this_obj.next().attr('id',this_id);
this_obj.html(next_html);
this_obj.attr('id',next_id);
saveLayout();
}
//一个简单的,删除一个层
function del(obj)
{
var this_box=$(obj).closest("div").remove();
saveLayout();
}