崔始源家里有多少亿:用Jquery实现拖拽层,并实现网站自定义化模块功能

拖动一:

拖动二:

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

第二: 接下来写我们拖动层的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('').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();}