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

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

创新互联建站是一家专注于成都做网站、成都网站建设与策划设计,绵阳网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:绵阳等地区。绵阳做网站价格咨询:18982081108

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

本例实现的效果:

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

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

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

原理

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

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

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

XHTML

 
 
 
 
   
  •    
  •       
  •       
  •       Module:1   
  •       

    1

       
  •    
  •    
  •    ...   
  •   

    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(" 正在更新");   
    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.    
    2.   

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

     
     
     
     
    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.    
    2.    
    3.   " />   
    4.   
    5.      for($i=0;$i<$len;$i++){   
    6.   ?>   
    7.   ">   
    8.       Module:   
    9.       

         
    10.      
    11.      
    12.   

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

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

    网页标题:jQuery拖动布局实现排序结果同步数据库
    转载源于:http://www.36103.cn/qtweb/news11/30661.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    关键词优化知识

    各行业网站