來源：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保存.當然你可以保存在數據庫里面)
functionsaveLayout( ) {
$.cookie ( 'my_self_panle' ,getVales( ) ) ;
changeIcon( ) ;
} //每一列模塊的值,其實sortable這個函數里有一個serialize可以直接取到對應的序列值:格式如下:
// $('#left').sortable('serialize',{key:'leftmod[]'}) + '&' + $('#right').sortable('serialize',{key:'rightmod[]'})
//我這里就沒有用這個東西
functiongetVales( )
{
varvales='' ;
varTstring=newArray( ) ;
varareas=newArray( 'left' ,'center' ,'right' ) ;
$.each ( areas, function ( i, vals) {
$( '#' +vals+'>.portlet' ) .each ( function ( j) {
vales=vales+'&' +this .id ;
} ) ;
Tstring[ i] =vales;
vales=''
} ) ;
returnTstring;
}

//這里只是改變上下排序的圖標.
functionchangeIcon( )
{
varareas=newArray( '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方法.
//有好的方法的朋友可以指導一下我.
functionup( obj)
{
varthis_obj=$( obj) .closest ( "div" ) ;
varprev_html = this_obj.prev ( ) .html ( ) ;
varthis_html = this_obj.html ( ) ;
varprev_id = this_obj.prev ( ) .attr ( "id" ) ;
varthis_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( ) ;//排序后.我們也要保存層
}
//同上面.只是這個是讓一個層向下
functiondown( obj)
{
varthis_obj=$( obj) .closest ( "div" ) ;
varnext_html = this_obj.next ( ) .html ( ) ;
varthis_html = this_obj.html ( ) ;
varnext_id = this_obj.next ( ) .attr ( "id" ) ;
varthis_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( ) ;
}

//一個簡單的,刪除一個層
functiondel( obj)
{
varthis_box=$( obj) .closest ( "div" ) .remove ( ) ;
saveLayout( ) ;
}

?最后.要說的,就是這個功能完結了...目前公司開發里,只用了一小部分這個功能...不過我自己的一個項目中...嘿嘿...用了這個功能.
用戶可以自己排列自己的網站頁面與功能...過些時日...有空的話..我把我的系統再完整一下...有機會朋友可以測試玩一下...幫我
找找問題...這也是進步~~~~

總結:一個小的教程可能對朋友們只能算是一塊小的磚頭...不知道能不能引出幾塊好的玉來...希望有更多的朋友加入分享自己成果的行列中....其實這樣到最后,收獲
最大的還是自己....這也是我為什么在很累的時候都希望自己有時間可以寫一些自己所得到的東西...我不期待什么好的回報...只是
期待更多朋友可以自己去學習,發現..再分享~~~~~

總結

以上是生活随笔為你收集整理的怎样用Jquery实现拖拽层,并实现网站自定义化模块功能?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。