最近的項目中涉及到了用戶個(gè)性化定制(zhì)首頁的需求，用戶要求可(kě)以随意拖動首頁模塊的位置，來(lái)實現個(gè)性化的布局。本文講解如何使用jquery和(hé)PHP實現拖動布局并将拖動後的布局位置保存到數(shù)據庫。

很(hěn)多(duō)網站(zhàn)的拖動布局的例子都是采用浏覽器(qì)的COOKIE來(lái)記錄用戶拖動模塊的位置，也就是說拖動後各模塊的排序位置信息是記錄在客戶端的cookie裏的。當用戶清空(kōng)客戶端的cookie或浏覽器(qì)的cookie過期後，再次訪問頁面時(shí)，發現布局又還(hái)原成最初的狀态。這種cookie記錄的方式使用簡單，但(dàn)不适合像個(gè)人(rén)中心、管理(lǐ)系統主頁的要求。

本例實現的效果：

• 通(tōng)過拖動随意布局頁面模塊。
• 記錄拖動後模塊的位置，并記錄到數(shù)據庫中。
• 頁面永久性布局，用任意浏覽器(qì)在任意時(shí)候打開(kāi)，頁面布局不變。（除非用戶再次更改模塊的排序，跟cookie沒有(yǒu)關系）。

原理(lǐ)

采用jquery ui的sorttable拖動排序插件實現拖動效果。

将拖動後的模塊的位置通(tōng)過ajax傳給服務端PHP程序。

PHP程序處理(lǐ)位置信息後，更新數(shù)據庫中相應的字段內(nèi)容。

XHTML

	



	
	

		
		

			Module:1
		

		

			1
		

	
...

DIV#loader用于顯示提示信息，如loading...，#orderlist是一個(gè)隐藏域，用于記錄模塊的排序值。“...”表示循環了n個(gè)DIV.modules，具體(tǐ)生(shēng)成的代碼在後面會(huì)講到。

CSS

#module_list{margin-left:4px}
.modules{float:left; width:200px; height:140px; margin:10px; border:1px solid #acc6e9;
 background:#e8f5fe}
.m_title{height:24px; line-height:24px; background:#afc6e9}
#loader{height:24px; text-align:center}

簡單，關鍵是要給.modules一個(gè)想左浮動的樣式float:left。

jQuery

$(function(){
	$(".m_title").bind('mouseover',function(){
		$(this).css("cursor","move")
	});
	
    var $show = $("#loader"); 
    var $orderlist = $("#orderlist");
	var $list = $("#module_list");
	
	$list.sortable({
		opacity: 0.6, //設置拖動時(shí)候的透明(míng)度
		revert: true, //緩沖效果
		cursor: 'move', //拖動的時(shí)候鼠标樣式
		handle: '.m_title',  //可(kě)以拖動的部位，模塊的标題部分
		update: function(){
			 var new_order = [];
             $list.children(".modules").each(function() {
                new_order.push(this.title);
             });
			 var newid = new_order.join(',');
			 var oldid = $orderlist.val();
			 $.ajax({
                type: "post",
                url: "update.php", //服務端處理(lǐ)程序
                data: { id: newid, order: oldid },   //id:新的排列對應的ID,order：原排列順序
                beforeSend: function() {
                     $show.html(" 正在更新");
                },
                success: function(msg) {
                     //alert(msg);
					 $show.html("");
                }
             });
		}
	});
});

拖動排序的動作(zuò)都寫在$list.sortable({...})裏面，參數(shù)設置和(hé)方法請(qǐng)看代碼的注釋。juery ui的sortable插件提供了很(hěn)多(duō)方法和(hé)參數(shù)配置，詳情請(qǐng)查看http://jqueryui.com/demos/sortable

拖動完成要執行(xíng)一個(gè)update方法，該方法需要将拖動後排序的位置通(tōng)過ajax提交給後台處理(lǐ)。

var new_order = [];
$list.children(".modules").each(function() {
     new_order.push(this.title);
});
var newid = new_order.join(',');
var oldid = $orderlist.val();

說明(míng)：循環每個(gè)模塊.modules，獲取拖動排序後每個(gè)模塊的屬性title值，将值通(tōng)過逗号連接成一個(gè)字符串。原來(lái)的未拖動之前的排序值從隐藏域orderlist中獲取。

獲取排序值後，就是通(tōng)過ajax和(hé)後台程序交互了。

PHP

update.php接收前端ajax通(tōng)過POST提交過來(lái)的兩個(gè)參數(shù)，及排序前的值和(hé)排序後的值，将這連個(gè)值進行(xíng)對比，如果不相等，則更新數(shù)據庫中的排序字段，完成了拖動排序後的及時(shí)保存。

include_once("connect.php");//連接數(shù)據庫
$order = $_POST['order'];
$itemid = trim($_POST['id']);
if (!empty ($itemid)) {
	if ($order != $itemid) {
		$query = mysql_query("update sortlist set sort='$itemid' where id=1");
		if ($query) {
			echo $itemid;
		} else {
			echo "none";
		}
	}
}

首頁index.php

再回到展示布局的首頁index.php。index.php通(tōng)過連接數(shù)據庫讀取模塊的排序信息，并将各模塊顯示出來(lái)。

首先别忘了加載jquery庫和(hé)jquery ui的sortable拖動排序插件。

讀取數(shù)據庫的排序字段值。

include_once("connect.php");

$query=mysql_query("select * from sortlist where id=1");
if($rs=mysql_fetch_array($query)){
   	$sort=$rs['sort'];
}
$sort_arr=explode(",",$sort);
$len=count($sort_arr);

循環顯示各模塊。

	



	
	

		
		

			Module:
		

		

			
		

	

誠然，真正的拖動排序結果的保存都跟每個(gè)用戶信息相關聯，所以數(shù)據庫的結構設計(jì)方面大(dà)家(jiā)可(kě)以自行(xíng)解決，盡情發揮吧(ba)。