});
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("<img src='load.gif' /> 正在更新");
},
success: function(msg) {
//alert(msg);
$show.html("");
}
});
}
});
});
拖动排序的动作都写在$list.sortable({…})里面，参数设置和方法请看代码的注释。juery ui的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和后台程序交互了。
PHP
update.php接收前端ajax通过POST提交过来的两个参数，及排序前的值和排序后的值，将这连个值进行对比，如果不相等，则更新数据库中的排序字段，完成了拖动排序后的及时保存。
include_once("connect.php");//连接数据库
$order = $_POST['order'];
$itemid = trim($_POST['id']);
if (!emptyempty ($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通过连接数据库读取模块的排序信息，并将各模块显示出来。
首先别忘了加载jquery库和jquery ui的sortable拖动排序插件。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
读取数据库的排序字段值。
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);
循环显示各模块。
<div id="loader"></div>
