jQuery實現拖動佈局並將排序結果保存到數據庫

最近的項目中涉及到了用戶個性化定製首頁的需求，用戶要求能夠隨意拖動首頁模塊的位置，來實現個性化的佈局。本文講解如何使用jquery實現拖動佈局並將拖動後的佈局位置保存到數據庫。

 

 

 

 

不少網站的拖動佈局的例子都是採用瀏覽器的COOKIE來記錄用戶拖動模塊的位置，也就是說拖動後各模塊的排序位置信息是記錄在客戶端的cookie裏的。當用戶清空客戶端的cookie或瀏覽器的cookie過時後，再次訪問頁面時，發現佈局又還原成最初的狀態。這種cookie記錄的方式使用簡單，但不適合像我的中心、管理系統主頁的要求。
本例實現的效果：

經過拖動隨意佈局頁面模塊。
記錄拖動後模塊的位置，並記錄到數據庫中。
頁面永久性佈局，用任意瀏覽器在任意時候打開，頁面佈局不變。（除非用戶再次更改模塊的排序，跟cookie沒有關係）。

原理

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

將拖動後的模塊的位置經過ajax傳給服務端PHP程序。

PHP程序處理位置信息後，更新數據庫中相應的字段內容。

 
<div id="loader"></div>

<div id="module_list">

<input type="hidden" id="orderlist" />

<div class="modules" title="1">

<h3 class="m_title">Module:1</h3>

<p>1</p>

</div>

...

</div>

DIV#loader用於顯示提示信息，如loading...，#orderlist是一個隱藏域，用於記錄模塊的排序值。「...」表示循環了n個DIV.modules，具體生成的代碼在後面會講到。
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一個想左浮動的樣式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, //設置拖動時候的透明度

revert: true, //緩衝效果

cursor: 'move', //拖動的時候鼠標樣式

handle: '.m_title', //能夠拖動的部位，模塊的標題部分

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.jsp", //服務端處理程序

data: { id: newid, order: oldid }, //id:新的排列對應的ID,order：原排列順序

beforeSend: function() {

$show.html("<img src='load.gif' /> 正在更新");

},

success: function(msg) {

//alert(msg);

$show.html("");

}

});

}

});

});

拖動排序的動做都寫在$list.sortable({...})裏面，參數設置和方法請看代碼的註釋。juery ui的sortable插件提供了不少方法和參數配置，詳情請查看http://jqueryui.com/demos/sortable

 

拖動完成要執行一個update方法，該方法須要將拖動後排序的位置經過ajax提交給後臺處理。

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

說明：循環每一個模塊.modules，獲取拖動排序後每一個模塊的屬性title值，將值經過逗號鏈接成一個字符串。原來的未拖動以前的排序值從隱藏域orderlist中獲取。

獲取排序值後，就是經過ajax和後臺程序交互了。

首先別忘了加載jquery庫和jquery ui的sortable拖動排序插件。

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery-ui.min.js"></script>