最近的專案中涉及到了使用者個性化定製首頁的需求，使用者要求可以隨意拖動首頁模組的位置，來實現個性化的布局。本文講解如何使用jquery和php實現拖動布局並將拖動後的布局位置儲存到資料庫。
很多**的拖動布局的例子都是採用瀏覽器的cookie來記錄使用者拖動模組的位置，也就是說拖動後各模組的排序位置資訊是記錄在客戶端的cookie裡的。當使用者清空客戶端的cookie或瀏覽器的cookie過期後，再次訪問頁面時，發現布局又還原成最初的狀態。這種cookie記錄的方式使用簡單，但不適合像個人中心、管理系統主頁的要求。
本例實現的效果：採用jquery ui的sorttable拖動排序外掛程式實現拖動效果。
將拖動後的模組的位置通過ajax傳給服務端php程式。
php程式處理位置資訊後，更新資料庫中相應的字段內容。
xhtml
id="loader"
>
id="module_list"
>
type
="hidden"
id="orderlist"
/>
class
="modules"
title
="1"
>
>
1...
css
#module_list.modules
.m_title
#loader
jquery
$(function());
var$show = $("#loader"
);
var$orderlist = $("#orderlist"
);var$list = $("#module_list"
);
$list.sortable();
varnewid = new_order.join(','
);varoldid = $orderlist.val();
$.ajax(, //id:新的排列對應的id,order：原排列順序
beforesend:function(),
success:function(msg)
});
}
});
});
拖動完成要執行乙個update方法，該方法需要將拖動後排序的位置通過ajax提交給後台處理。
varnew_order = ;
$list.children(".modules"
).each(function());
varnewid = new_order.join(','
);varoldid = $orderlist.val();
獲取排序值後，就是通過ajax和後台程式互動了。
phpupdate.php接收前端ajax通過post提交過來的兩個引數，及排序前的值和排序後的值，將這連個值進行對比，如果不相等，則更新資料庫中的排序字段，完成了拖動排序後的及時儲存。
include_once("connect.php"
);//連線資料庫
$
order
= $_post
['order'
];$
itemid
= trim($_post
['id'
]);
if(!empty($
itemid
))else} }
再回到展示布局的首頁index.php。index.php通過連線資料庫讀取模組的排序資訊，並將各模組顯示出來。
首先別忘了載入jquery庫和jquery ui的sortable拖動排序外掛程式。
include_once("connect.php"
);
$
query
=mysql_query("select * from sortlist where id=1"
);if($
rs=mysql_fetch_array($
query
))$
sort_arr
=explode(","
,$
sort
);$
len=count($
sort_arr
);
id="loader"
>
id="module_list"
>
type
="hidden"
id="orderlist"
value
="<?php
echo
$
sort
;?>
"/>
<?php
for($i=0
;$
i<$
len;$
i++) ?>
jQuery實現拖動排序並將排序結果保
最近的專案中涉及到了使用者個性化定製首頁的需求，使用者要求可以隨意拖動首頁模組的位置，來實現個性化的布局。本文講解如何使用jquery實現拖動布局並將拖動後的布局位置儲存到資料庫。demo 很多 的拖動布局的例子都是採用瀏覽器的cookie來記錄使用者拖動模組的位置，也就是說拖動後各模組的排序位置資...
jQuery實現拖動
定位 給要拖動的物件設定乙個定位 position aboselute 座標 使用event.clientx event.clienty獲取滑鼠位置，使用obj.offset left obj.offset top獲取物件離瀏覽器左上角的座標 事件 mousedown,mouseup,mousemo...
jquery實現聊天視窗拖動
實現 滑鼠的點選按下事件 滑鼠的移動事件 滑鼠點選鬆開事件 思路 mousedown事件 當滑鼠點選聊天視窗，點選事件可以得到當前的滑鼠的點選位置並記錄下來，並得到當前視窗的左和上的偏移位置，還需要新增乙個滑鼠點選該聊天視窗的標誌位。document mousemove事件 滑鼠移動，觸發mouse...