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

?

現(xiàn)在的網(wǎng)站...很多模塊化的東西..都希望實現(xiàn)可視化的操作..主要原因是為了提高用戶體驗.增強用戶的粘合度.當(dāng)然這也間接性地體現(xiàn)出本網(wǎng)站的高質(zhì)量 性能...用Javascript 實現(xiàn)頁面的拖動與同步保存,在技術(shù)上已經(jīng)不是什么新的東西..因為我們所接觸的系統(tǒng)就有.比如Google的用戶面版iGoogle,當(dāng)然還有百度的my 百度.這二個系統(tǒng)就很好的提現(xiàn)出拖動層的運用..當(dāng)我們在運用這些系統(tǒng)的時候..我們會感覺非同一般
感受..腦海中會出現(xiàn)一個字:贊!
??? 今天我也要來玩一把這個拖動層.(這原因當(dāng)然是公司的系統(tǒng)中需要這個功能).當(dāng)然我的Javascript的功力還不到Google,百度它們公司人員的 十分之一.所以呢..我借助的是Jquery這個JS類庫來實現(xiàn)這么一個功能. 在介紹功能實現(xiàn)之前:先上幾張效果圖片:

拖動一:

拖動二:

??? 在介紹這個功能實現(xiàn)之前,我想很多朋友都會Jquery.同時,對Jquery這里面的UI功能是有相當(dāng)?shù)恼J(rèn)識的.UI里面有一個sortable這么一一塊的介紹..其實里面的大部分功能都已經(jīng)寫好了拖動效果.我們只需要學(xué)會用就可以....
??? 第一:
??? 我們需要加入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函數(shù)功能.主要的函數(shù)(sortable)如下(注:我這里只基本功能):

$( function ( ){
$( ".column" ) .sortable ( {
connectWith: '.column' ,//要拖動層的列
opacity: 0.4 ,//模糊效果值
revert: true ,
stop :saveLayout//拖動完成后,回調(diào)函數(shù).這里就可以通過AJAX把層的順序保存在數(shù)據(jù)庫里面
} ) ;
$( ".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 ( ) ;
}

?關(guān)于sortable這個函數(shù)所有值代表的意思,我也不在這里多介紹了..因為比較多..不是太好多介紹..朋友們可以參考jquery的UI API介紹..在那里介紹的很詳細(xì)..不過是E文.但都很
簡單.慢慢看吧..呵呵....

??? 第三:寫一些亂七八糟的功能,比如上下排序?qū)?刪除層和拖動前或拖動完成后等等一些回調(diào)函數(shù).

//保存模塊排序并寫入Cookie (^_^我這里只有COOKIE保存.當(dāng)然你可以保存在數(shù)據(jù)庫里面)

//保存模塊排序并寫入Cookie (^_^我這里只有COOKIE保存.當(dāng)然你可以保存在數(shù)據(jù)庫里面)
functionsaveLayout( ) {
$.cookie ( 'my_self_panle' ,getVales( ) ) ;
changeIcon( ) ;
} //每一列模塊的值,其實sortable這個函數(shù)里有一個serialize可以直接取到對應(yīng)的序列值:格式如下:
// $('#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;
}

//這里只是改變上下排序的圖標(biāo).
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 ( ) ;
} ) ;
}

//把一個層向上.這個函數(shù)寫的不算好..我總認(rèn)為有更好的方法.比如用:clone方法.
//有好的方法的朋友可以指導(dǎo)一下我.
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( ) ;
}

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。