jQuery拖动布局其结果保存到数据库(jquery 拖拽布局)

发布时间：2024-02-27

推荐整理分享jQuery拖动布局其结果保存到数据库(jquery 拖拽布局)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery拖拽布局插件,jquery移动元素,jq拖拽功能,js拖拽布局,js div拖动,jquery 拖拽布局,jquery 拖拽布局,jq拖拽功能,内容如对您有帮助，希望把文章链接给更多的朋友！

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

很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置，也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的。当用户清空客户端的cookie或浏览器的cookie过期后，再次访问页面时，发现布局又还原成最初的状态。这种cookie记录的方式使用简单，但不适合像个人中心、管理系统主页的要求。本例实现的效果：通过拖动随意布局页面模块。记录拖动后模块的位置，并记录到数据库中。页面永久性布局，用任意浏览器在任意时候打开，页面布局不变。（除非用户再次更改模块的排序，跟cookie没有关系）。原理采用的拖动排序插件实现拖动效果。将拖动后的模块的位置通过ajax传给服务端PHP程序。PHP程序处理位置信息后，更新数据库中相应的字段内容。XHTML

DIV#loader用于显示提示信息，如loading...，#orderlist是一个隐藏域，用于记录模块的排序值。“...”表示循环了n个DIV.modules，具体生成的代码在后面会讲到。CSS

简单，关键是要给.modules一个想左浮动的样式float:left。jQuery

拖动排序的动作都写在$list.sortable({...})里面，参数设置和方法请看代码的注释。juery ui的sortable插件提供了很多方法和参数配置，详情请查看拖动完成要执行一个update方法，该方法需要将拖动后排序的位置通过ajax提交给后台处理。

说明：循环每个模块.modules，获取拖动排序后每个模块的属性title值，将值通过逗号连接成一个字符串。原来的未拖动之前的排序值从隐藏域orderlist中获取。获取排序值后，就是通过ajax和后台程序交互了。PHPupdate.php接收前端ajax通过POST提交过来的两个参数，及排序前的值和排序后的值，将这连个值进行对比，如果不相等，则更新数据库中的排序字段，完成了拖动排序后的及时保存。

首页index.php再回到展示布局的首页index.php。index.php通过连接数据库读取模块的排序信息，并将各模块显示出来。首先别忘了加载jquery库和jquery ui的sortable拖动排序插件。

读取数据库的排序字段值。

循环显示各模块。

诚然，真正的拖动排序结果的保存都跟每个用户信息相关联，所以数据库的结构设计方面大家可以自行解决，尽情发挥吧。