jQuery实现拖动排序并将排序结果保…

最近的项目中涉及到了用户个性化定制首页的需求，用户要求可以随意拖动首页模块的位置，来实现个性化的布局。本文讲解如何使用jQuery实现拖动布局并将拖动后的布局位置保存到数据库。

DEMO

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

本例实现的效果：

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

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

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

原理：

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

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

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

 

HTML：