jQuery拖动布局实现排序结果同步数据库

很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置，也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的。当用户清空客户端的cookie或浏览器的cookie过期后，再次访问页面时，发现布局又还原成最初的状态。这种cookie记录的方式使用简单，但不适合像个人中心、管理系统主页的要求。

创新互联建站是一家专注于成都做网站、成都网站建设与策划设计,绵阳网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:绵阳等地区。绵阳做网站价格咨询:18982081108

推荐专题：jQuery从入门到精通 jQuery给力插件大阅兵

本例实现的效果：

通过拖动随意布局页面模块。

记录拖动后模块的位置，并记录到数据库中。

页面***性布局，用任意浏览器在任意时候打开，页面布局不变。(除非用户再次更改模块的排序，跟cookie没有关系)。

原理

采用jquery ui的sorttable拖动排序插件实现拖动效果。

将拖动后的模块的位置通过ajax传给服务端PHP程序。

PHP程序处理位置信息后，更新数据库中相应的字段内容。

XHTML

Module:1

#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}

$(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.php", //服务端处理程序
data: { id: newid, order: oldid }, //id:新的排列对应的ID,order：原排列顺序
beforeSend: function() {
$show.html(" 正在更新");
},
success: function(msg) {
//alert(msg);
$show.html("");
}
});
}
});
});

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

include_once("connect.php");//连接数据库
$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";
}
}
}

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);

" />
for($i=0;$i<$len;$i++){
?>
">
Module: