许多网站拖放布局的例子是浏览器的cookie来记录用户拖动模块的位置，也就是说，每个模块的位置信息在客户端的cookie后拖的记录。当用户清除客户端的cookie或浏览器的cookie过期，发现布局又恢复到原来的状态时，页面被重新审视。这个记录是易于使用，但不适用于个人中心管理系统首页。
这个例子的效果：
通过拖动拖动页面模块的随机布局。
将记录之后的模块的位置拖到数据库中并记录下来。
页面永久布局，任何浏览器随时打开，页面布局都是一样的。（除非用户再次更改模块的顺序，它与cookie没有关系）。
原理
拖动排序插件用于实现拖动效果。
拖动模块的位置通过Ajax传递给服务器端PHP程序。
PHP程序处理位置信息之后，它更新数据库中相应字段的内容。
XHTML
模块：1
一
…
DIV #装载机是用来显示提示信息，如加载中…，#排行榜是一个隐藏域记录排序值的模块的…表明DIV.modules循环，和具体的生成的代码将在后面介绍。
CSS
# module_list {保证金左：4px }
。模块{浮动：左；宽度：200px；身高：140px；保证金：10px；边框1px solid # acc6e9；
背景：# e8f5fe }
。m_title {身高：24px；线高度：24px；背景：# afc6e9 }
#装载机{身高：24px；文本对齐：中心}
简单地说，关键是给模块一个样式浮动：左边想向左浮动。
jQuery
$（函数（）{（））
$（。m_title）。Bind（'mouseover，函数（）{）
$（这个）Css（光标）
}）；
电邮显示=美元（#装载机）；
var =美元美元（#排行榜排行榜）；
var list =美元美元（# module_list ）；
list.sortable美元（{
不透明：0.6 /设置拖动时的透明度
还原：真正的缓冲区效应
光标：'move '，当鼠标拖动/风格
手柄：'。m_title ' / /可以拖动部件模块标题部分
更新：函数（）{
无功new_order = { }；
list.children美元（。模块）。每个（函数（）{）
new_order.push（这个名称。）；
}）；
VaR NEWID = new_order.join（'，'）；
无功oldid = orderlist.val美元（）；
$ ajax（{
类型：邮政
URL服务器处理程序
数据：{编号：NEWID，顺序为：oldid }， / /身份：新的安排对应的ID，原来的顺序为：
beforesend：函数（）{
show.html美元（过程中的更新）；
}，
成功：函数（MSG）{
警报（MSG）；
show.html美元（）；
}
}）；
}
}）；
}）；
拖动排序的作用是写在list.sortable美元（{…}），和参数设置方法，请看代码的注释，juery实现UI排序插件提供了很多方法和参数配置，详细请看
拖动完成是执行一个更新方法，该方法要求通过Ajax将拖动序列的位置提交到后台处理。
无功new_order = { }；
list.children美元（。模块）。每个（函数（）{）
new_order.push（这个名称。）；
}）；
VaR NEWID = new_order.join（'，'）；
无功oldid = orderlist.val美元（）；
注：周期的每个模块。模块，拖动排序后得到每个模块的属性名称的价值，并将值用逗号分隔字符串。原来的排序值之前的阻力是从隐藏域得到的排行榜。
获取排序值后，它将与Ajax和守护进程交互。
PHP
该update.php接收前端Ajax两参数提交通过后，和值排序前和值排序后的比较。如果这些不相等，更新数据库中的排序字段，并在拖动和排序之后完成及时保存。
include_once（连接。PHP）； / /数据库连接
为了_post美元美元= {是}；
美元（$ _post $Itemid =装饰{ 'id' }）；
如果（！emptyempty（$ ITEMID））{
如果（订单）！= $ ITEMID）{
为查询= mysql_query（更新sortlist设置排序= $ itemid'where ID = 1 ）；
如果（$查询）{
echo $Itemid；
{人}
；
}
}
}
主页index.php
回到显示布局的首页，index.php.index.php读取模块的排序信息通过连接数据库并显示模块。
首先，别忘了加载了jQuery库，可拖动排序为jQuery UI插件。
读取数据库的排序字段值。
include_once（连接。PHP ）；
为查询= mysql_query（SELECT * FROM sortlist id是1 ）；
如果（RS = mysql_fetch_array美元（$查询））{
排序= RS {大概}美元；
}
sort_arr美元=爆炸（
$ len =计数（$ sort_arr）；
每个模块都显示在循环中。
< PHP
（$ i = 0；$ i；
>
>
模块：
事实上，真正的拖放排序结果的保存与每个用户信息有关，因此您可以解决数据库结构设计，并将其发挥到最佳状态。
以上是jQuery实现的拖拽布局并将排序结果保存到数据库中，希望能对您有所帮助。
