最近的專案中涉及到了使用者個性化定製首頁的需求，使用者要求可以隨意拖動首頁模組的位置，來實現個性化的布局。本文講解如何使用jquery實現拖動布局並將拖動後的布局位置儲存到資料庫。
demo
很多**的拖動布局的例子都是採用瀏覽器的cookie來記錄使用者拖動模組的位置，也就是說拖動後各模組的排序位置資訊是記錄在客戶端的cookie裡的。當使用者清空客戶端的cookie或瀏覽器的cookie過期後，再次訪問頁面時，發現布局又還原成最初的狀態。這種cookie記錄的方式使用簡單，但不適合像個人中心、管理系統主頁的要求。
本例實現的效果：
通過拖動隨意布局頁面模組。
記錄拖動後模組的位置，並記錄到資料庫中。
頁面永久性布局，用任意瀏覽器在任意時候開啟，頁面布局不變。（除非使用者再次更改模組的排序，跟cookie沒有關係）。
原理：
採用jquery ui的sorttable拖動排序外掛程式實現拖動效果。
將拖動後的模組的位置通過ajax傳給服務端php程式。
php程式處理位置資訊後，更新資料庫中相應的字段內容。
html：
1 ...
div#loader
用於顯示提示資訊，如loading...，#orderlist是乙個隱藏域，用於記錄模組的排序值。「...」表示迴圈了n個div.modules，具體生成的**在後面會講到。
css：
#module_list
.modules .m_title
#loader
簡單，關鍵是要給.modules乙個想左浮動的樣式float:left。
jquery：
$(function());
var $show = $("#loader");
var $orderlist = $("#orderlist");
var $list = $("#module_list");
$list.sortable();
var newid = new_order.join(',');
var oldid = $orderlist.val();
$.ajax(, //id:
新的排列對應的id,order：原排列順序
beforesend: function() ,
success: function(msg)
});
} });
});
拖動排序的動作都寫在$list.sortable()裡面，引數設定和方法請看**的注釋。juery ui的sortable外掛程式提供了很多方法和引數配置，詳情請檢視
拖動完成要執行乙個update方法，該方法需要將拖動後排序的位置通過ajax提交給後台處理。
寫道：
var new_order = ;
$list.children(".modules").each(function() );
var newid = new_order.join(',');
var oldid = $orderlist.val();
說明：迴圈每個模組.modules，獲取拖動排序後每個模組的屬性title值，將值通過逗號連線成乙個字串。原來的未拖動之前的排序值從隱藏域orderlist中獲取。
獲取排序值後，就是通過ajax和後台程式互動了。
首先別忘了載入jquery庫和jquery ui的sortable拖動排序外掛程式。
jQuery實現拖動布局並將排序結果儲存到資料庫
最近的專案中涉及到了使用者個性化定製首頁的需求，使用者要求可以隨意拖動首頁模組的位置，來實現個性化的布局。本文講解如何使用jquery和php實現拖動布局並將拖動後的布局位置儲存到資料庫。很多 的拖動布局的例子都是採用瀏覽器的cookie來記錄使用者拖動模組的位置，也就是說拖動後各模組的排序位置資訊...
jQuery實現拖動
定位 給要拖動的物件設定乙個定位 position aboselute 座標 使用event.clientx event.clienty獲取滑鼠位置，使用obj.offset left obj.offset top獲取物件離瀏覽器左上角的座標 事件 mousedown,mouseup,mousemo...
jquery實現聊天視窗拖動
實現 滑鼠的點選按下事件 滑鼠的移動事件 滑鼠點選鬆開事件 思路 mousedown事件 當滑鼠點選聊天視窗，點選事件可以得到當前的滑鼠的點選位置並記錄下來，並得到當前視窗的左和上的偏移位置，還需要新增乙個滑鼠點選該聊天視窗的標誌位。document mousemove事件 滑鼠移動，觸發mouse...