jQuery拖动布局并将结果保存到数据库中

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

网站拖拽布局的很多例子都是使用浏览器的cookies记录用户拖拽的模块的位置，也就是说拖拽后每个模块的排序位置信息都记录在客户端的cookies中。当用户清空客户端的cookie或浏览器的cookie过期并再次访问页面时，他发现布局恢复到了原始状态。这种cookie记录方式使用简单，但不适合个人中心和管理系统主页。这个例子的效果是：通过拖动随意布局页面模块。记录被拖动模块的位置，并将其记录在数据库中。页面布局是永久性的，可以随时用任何浏览器打开，页面布局保持不变。(除非用户再次更改模块顺序，否则与cookie无关。).原理上使用的拖拽排序插件实现了拖拽效果。通过ajax将拖动模块的位置发送给服务器端的PHP程序。PHP程序处理完位置信息后，会更新数据库中相应的字段。可扩展的超文本标记语言

Div id=' loader '/Div Div id=' module _ list '输入类型=' hidden ' id=' order list '/Div class=' modules ' title=' 1 ' H3 class=' m _ title ' module :1/H3 P1/p/Div./div DIV#loader用于显示提示信息，如加载.而#orderlist是一个隐藏字段，用于记录模块的排序值。"."意味着循环n个DIV.modules，生成的代码将在后面描述。半铸钢钢性铸铁(Cast Semi-Steel)

# module _ list { margin-left :4 px }。模块{ float:left宽度width:200px高度：140 px；margin:10pxborder:1px固体# acc6e9背景：#e8f5fe}。m _ title { height:24px线高：24 px；background : # afc6e 9 } # loader { height :24 px；Text-align:center}很简单，关键是给予。模块一个想要向左浮动的浮动样式。jQuery

$(function(){ $(')。m _ title’)。bind('mouseover '，function(){ $(this)。css('光标'，'移动')})；var $ show=$(' # loader ')；var $ order list=$(' # order list ')；var $ list=$(' # module _ list ')；$ list . sortable({ opa city 3360 0.6，//拖动时将透明度还原设置为： true，//缓冲效果光标： 'move '，//鼠标样式句柄： '。' m _ title '拖动时，//可拖动的部分，模块的title部分更新3360函数()。$list.children('。模块')。每个(function(){ new _ order . push(this . title)；});var newid=new_order.join('，')；var oldid=$ order list . val()；$.Ajax ({type:' post '，url3360' update.php '，//服务器处理程序data: { ID:newID，order:oldid}，//id 3360新排列的id，order:原始顺序在send : function(){ $ show.html(' img src=' load . gif '/updating ')之前；}，success:函数(msg){//alert(msg)；$ show . html(“”)；} });} });});拖动和排序的动作写在$list中.}).参数设置和方法请参考代码的注释。juery ui的可排序插件提供了很多方法和参数配置。具体请查看拖拽后是否要执行一个更新方法，需要将拖拽后的排序位置提交到后台通过ajax进行处理。

var new _ order=[]；$list.children('。模块')。每个(function(){ new _ order . push(this . title)；});var newid=new_order.join('，')；var oldid=$ order list . val()；描述：循环每个模块。模块，拖动并排序后得到每个模块的属性标题值，并通过逗号将这些值连接成字符串。拖动前原稿的排序值从隐藏字段排序列表中获取。得到排序值后，就是通过ajax与后台程序进行交互。PHPupdate.php通过POST接收前端ajax提交的两个参数，以及排序前和排序后的值，并比较这些值。如果不相等，则更新数据库中的排序字段，拖动排序后及时完成保存。

include _ once(' connect . PHP ')；//连接到数据库$ order=$ _ POST[' order ']；$ itemid=trim($ _ POST[' id '])；if(！emptyempty ($itemid)) { if ($order！=$ itemid){ $ query=MySQL _ query(' update sort list set sort=' $ itemid '其中id=1 ')；if($ query){ echo $ itemid；} else { echo ' none}}}主页index.php返回到显示布局的主页index.php。index.php通过连接数据库读取模块的排序信息，并显示每个模块。首先，不要忘记加载jquery库和jquery ui的可排序拖动排序插件。

脚本类型=' text/JAVAScript ' src=' http : js/jquery . js '/script script类型=' text/JAVAScript ' src=' http 3360 js/jquery-ui . min . js '/脚本读取数据库的排序字段值。

include _ once(' connect . PHP ')；$query=mysql_query('从sortlist中选择*其中id=1 ')；if($ RS=MySQL _ fetch _ array($ query)){ $ sort=$ RS[' sort ']；} $sort_arr=explode('，'，$ sort)；$ len=count($ sort _ arr)；在模块中循环。

div id=' loader '/div div id=' module _ list '输入类型='hidden' id='orderlist' value='？php echo $ sort?'/?PHP for($ I=0；$ i $ len$i ){？div class='modules' title='？PHP echo $ sort _ arr[$ I]；'h3 class='m_title'Module:PHP echo $ sort _ arr[$ I]；/h3 p？PHP echo $ sort _ arr[$ I]；/p /div？php }？/div诚然，真实拖拽排序结果的保存与每个用户的信息有关，所以可以自行解决数据库的结构设计。

以上就是jQuery拖拽布局并将排序结果保存到数据库的实现过程，希望对大家的学习有所帮助。