jQuery拖动布局实现排序结果同步数据库

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

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

51CTO推荐专题:jQuery从入门到精通   jQuery给力插件大阅兵

jQuery实现拖动布局并将排序结果保存到数据库 

 

jQuery实现拖动布局并将排序结果保存到数据库

本例实现的效果:

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

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

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

原理

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

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

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

XHTML

  1. <div id="loader"></div>   
  2. <div id="module_list">   
  3.    <input type="hidden" id="orderlist" />   
  4.    <div class="modules" title="1">   
  5.       <h3 class="m_title">Module:1</h3>   
  6.       <p>1</p>   
  7.    </div>   
  8.    ...   
  9. </div>  

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

CSS

  1. #module_list{margin-left:4px}   
  2. .modules{float:left; width:200px; height:140px; margin:10px; border:1px solid #acc6e9;   
  3.  background:#e8f5fe}   
  4. .m_title{height:24px; line-height:24px; background:#afc6e9}   
  5. #loader{height:24px; text-align:center}  

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

jQuery

  1. $(function(){   
  2.     $(".m_title").bind('mouseover',function(){   
  3.         $(this).css("cursor","move")   
  4.     });   
  5.        
  6.     var $show = $("#loader");    
  7.     var $orderlist = $("#orderlist");   
  8.     var $list = $("#module_list");   
  9.        
  10.     $list.sortable({   
  11.         opacity: 0.6, //设置拖动时候的透明度   
  12.         revert: true//缓冲效果   
  13.         cursor: 'move'//拖动的时候鼠标样式   
  14.         handle: '.m_title',  //可以拖动的部位,模块的标题部分   
  15.         update: function(){   
  16.              var new_order = [];   
  17.              $list.children(".modules").each(function() {   
  18.                 new_order.push(this.title);   
  19.              });   
  20.              var newid = new_order.join(',');   
  21.              var oldid = $orderlist.val();   
  22.              $.ajax({   
  23.                 type: "post",   
  24.                 url: "update.php"//服务端处理程序   
  25.                 data: { id: newid, order: oldid },   //id:新的排列对应的ID,order:原排列顺序   
  26.                 beforeSend: function() {   
  27.                      $show.html("<img src='load.gif' /> 正在更新");   
  28.                 },   
  29.                 success: function(msg) {   
  30.                      //alert(msg);   
  31.                      $show.html("");   
  32.                 }   
  33.              });   
  34.         }   
  35.     });   
  36. });  

拖动排序的动作都写在$list.sortable({...})里面,参数设置和方法请看代码的注释。juery ui的sortable插件提供了很多方法和参数配置,详情请查看http://jqueryui.com/demos/sortable

拖动完成要执行一个update方法,该方法需要将拖动后排序的位置通过ajax提交给后台处理。

  1. var new_order = [];   
  2. $list.children(".modules").each(function() {   
  3.      new_order.push(this.title);   
  4. });   
  5. var newid = new_order.join(',');   
  6. var oldid = $orderlist.val();  

说明:循环每个模块.modules,获取拖动排序后每个模块的属性title值,将值通过逗号连接成一个字符串。原来的未拖动之前的排序值从隐藏域orderlist中获取。

获取排序值后,就是通过ajax和后台程序交互了。

PHP

update.php接收前端ajax通过POST提交过来的两个参数,及排序前的值和排序后的值,将这连个值进行对比,如果不相等,则更新数据库中的排序字段,完成了拖动排序后的及时保存。

  1. include_once("connect.php");//连接数据库   
  2. $order = $_POST['order'];   
  3. $itemid = trim($_POST['id']);   
  4. if (!empty ($itemid)) {   
  5.     if ($order != $itemid) {   
  6.         $query = mysql_query("update sortlist set sort='$itemid' where id=1");   
  7.         if ($query) {   
  8.             echo $itemid;   
  9.         } else {   
  10.             echo "none";   
  11.         }   
  12.     }   
  13. }  

首页index.php再回到展示布局的首页index.php。index.php通过连接数据库读取模块的排序信息,并将各模块显示出来。

首先别忘了加载jquery库和jquery ui的sortable拖动排序插件。

  1. <script type="text/javascript" src="js/jquery.js"></script>   
  2. <script type="text/javascript" src="js/jquery-ui.min.js"></script>  

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

  1. include_once("connect.php");   
  2.    
  3. $query=mysql_query("select * from sortlist where id=1");   
  4. if($rs=mysql_fetch_array($query)){   
  5.        $sort=$rs['sort'];   
  6. }   
  7. $sort_arr=explode(",",$sort);   
  8. $len=count($sort_arr);  

循环显示各模块。

  1. <div id="loader"></div>   
  2. <div id="module_list">   
  3.   <input type="hidden" id="orderlist" value="<?php echo $sort;?>" />   
  4.   <?php    
  5.      for($i=0;$i<$len;$i++){   
  6.   ?>   
  7.   <div class="modules" title="<?php echo $sort_arr[$i]; ?>">   
  8.       <h3 class="m_title">Module:<?php echo $sort_arr[$i]; ?></h3>   
  9.       <p><?php echo $sort_arr[$i]; ?></p>   
  10.   </div>   
  11.   <?php } ?>   
  12. </div>  

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

原文链接:http://www.helloweba.com/view-blog-72.html

【编辑推荐】

  1. 分享7个用jQuery重写的经典在线小游戏
  2. jQuery的.bind()、.live()和.delegate()之间区别
  3. 分享10个超炫的jQuery网站
  4. HTML 5联手jQuery实现超酷图像灰度渐变效果
  5. jQuery异步调用页面后台实例分析
责任编辑:陈贻新 来源: helloweba.com
相关推荐

2010-06-02 16:57:50

MySQL数据库同步

2010-06-09 17:36:45

MySQL数据库同步

2010-08-27 09:59:51

SQL Server

2010-06-09 15:01:18

MySQL数据库同步

2020-09-21 11:30:28

CanalMySQL数据库

2020-08-31 07:00:00

数据库数据库同步

2010-05-04 14:57:27

Oracle数据库

2011-07-13 16:19:54

存储过程SQL Server数

2010-07-02 08:39:02

SQLServer数据

2019-10-08 15:54:42

SQL数据库技术

2019-08-13 15:52:34

数据库同步迁移

2011-03-23 10:55:55

PHPMySQLjQuery

2010-06-09 14:04:34

MySQL数据库

2012-09-20 09:43:37

SSIS

2020-05-10 16:36:08

存储数据库内存

2010-05-07 13:14:22

数据库负载均衡

2010-05-12 18:41:34

MySQL数据库

2010-08-03 10:16:15

DB2 数据库

2010-07-22 11:17:52

SQL Server数

2023-02-28 17:24:32

顺串字符串快速排序
点赞
收藏

51CTO技术栈公众号