jq+php+msyql 拖拽排序
最近的项目中涉及到了用户个性化定制首页的需求,用户要求可以随意拖动首页导航的位置,来实现个性化的布局。本文讲解如何使用jquery和PHP实现拖动布局并将拖动后的布局位置保存到数据库。
很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置,也就是说拖动后各模块的排序位置信息是记录在客户端的 cookie里的。当用户清空客户端的cookie或浏览器的cookie过期后,再次访问页面时,发现布局又还原成最初的状态。这种cookie记录的 方式使用简单,但不适合像个人中心、管理系统主页的要求。
本例实现的效果:
- 通过拖动随意布局页面模块。
- 记录拖动后模块的位置,并记录到数据库中。
- 页面永久性布局,用任意浏览器在任意时候打开,页面布局不变。(除非用户再次更改模块的排序,跟cookie没有关系)。
原理
采用jquery ui的sorttable拖动排序插件实现拖动效果。
将拖动后的模块的位置通过ajax传给服务端PHP程序。
PHP程序处理位置信息后,更新数据库中相应的字段内容。
HTML<script type="text/javascript" src="__PUBLIC__/js/jquery-ui.min.js"></script>
<ul class="nav navbar-nav" id="item-menu">
<foreach name="department" item="v" >
<li id="{$v.d_id}" title="{$v.sort}">
<a href="javascript:void(0);"
class="load-toggle"
data-load="__URL__/development?depart={$v.d_id}"
data-key = "{$key}"
data-id = "{$v.d_id}">
{$v.d_name}
</a>
</li>
<input type="hidden" id="orderlist">
</foreach>
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
worktile <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="https://worktile.zorelworld.com/"
target="_blank">
跳转
</a>
</li>
</ul>
</li>
</ul>
JQ
$( function() {
var list = $( "#item-menu" );
//var show = $("#show"); //输出提示
var orderlist = $("#orderlist"); //原顺序
var order = [];
list.children("li").each(function() {
order.push(this.title); //原排列顺序保存在title,得到后更改title
$(this).attr("title", "你可以拖动进行排序");
});
orderlist.val(order.join(','));
var Update = function(itemid) {
$.ajax({
type: "post",
url: "t",
//id:新的排列对应的ID,order:原排列顺序
data: {
id: itemid,
order: orderlist.val()
},
dataType:"json",
success: function(msg) {
}
});
};
//调用ajax更新方法
var Submit = function(update) {
var order = [];
list.children("li").each(function() {
order.push(this.id);
});
var itemid = order.join(',');
//如果单选框选中,则更新表中排列顺序
if (!update) {
Update(itemid);
}
else {
show.html("");
}
};
//执行排列操作
list.sortable({
opacity: 0.7,
update: function() {
Submit();
}
});
// .sortable({
// });
$( "#item-menu" ).disableSelection();
} );
PHP
将新的排列对的id做为key值,原排列的顺序做为value;
循环插入!
此方法不是效率最高的,如果数据量比较大的话直接循环修改是不明智的选择,个人想法是在修改前 取出数据库中的id或者排序字段与新的排序键值进行循环对比,筛选出不同的在进行循环修改,相比上边做法效率会有所提高!
如有更好的办法,还望告知!