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

来源：http://www.oophp.cn/article/view/id/371

现在的网站...很多模块化的东西..都希望实现可视化的操作..主要原因是为了提高用户体验.增强用户的粘合度.当然这也间接性地体现出本网站的高质量
性能...用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(
)
;

}

最后.要说的,就是这个功能完结了...目前公司开发里,只用了一小部分这个功能...不过我自己的一个项目中...嘿嘿...用了这个功能.

用户可以自己排列自己的网站页面与功能...过些时日...有空的话..我把我的系统再完整一下...有机会朋友可以测试玩一下...帮我

找找问题...这也是进步~~~~

总结:一个小的教程可能对朋友们只能算是一块小的砖头...不知道能不能引出几块好的玉来...希望有更多的朋友加入分享自己成果的行列中....其实这样到最后,收获

最大的还是自己....这也是我为什么在很累的时候都希望自己有时间可以写一些自己所得到的东西...我不期待什么好的回报...只是

期待更多朋友可以自己去学习,发现..再分享~~~~~