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

本例实现的效果:

  • 通过拖动随意布局页面模块。
  • 记录拖动后模块的位置,并记录到数据库中。
  • 页面永久性布局,用任意浏览器在任意时候打开,页面布局不变。(除非用户再次更改模块的排序,跟cookie没有关系)。

原理

采用jquery uisorttable拖动排序插件实现拖动效果。

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

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

XHTML

 
<div id="loader"></div> 
<div id="module_list"> 
   <input type="hidden" id="orderlist" /> 
   <div class="modules" title="1"> 
      <h3 class="m_title">Module:1</h3> 
      <p>1</p> 
   </div> 
   ... 
</div> 

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

CSS

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

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

jQuery

 
$(function(){ 
    $(".m_title").bind('mouseover',function(){ 
        $(this).css("cursor","move") 
    }); 
     
    var $show = $("#loader");  
    var $orderlist = $("#orderlist"); 
    var $list = $("#module_list"); 
     
    $list.sortable({ 
        opacity: 0.6, //设置拖动时候的透明度 
        revert: true, //缓冲效果 
        cursor: 'move', //拖动的时候鼠标样式 
        handle: '.m_title',  //可以拖动的部位,模块的标题部分 
        update: function(){ 
             var new_order = []; 
             $list.children(".modules").each(function() { 
                new_order.push(this.title); 
             }); 
             var newid = new_order.join(','); 
             var oldid = $orderlist.val(); 
             $.ajax({ 
                type: "post", 
                url: "update.php", //服务端处理程序 
                data: { id: newid, order: oldid },   //id:新的排列对应的ID,order:原排列顺序 
                beforeSend: function() { 
                     $show.html("<img src='load.gif' /> 正在更新"); 
                }, 
                success: function(msg) { 
                     //alert(msg); 
                     $show.html(""); 
                } 
             }); 
        } 
    }); 
}); 

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

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

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

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

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

PHP

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

 
include_once("connect.php");//连接数据库 
$order = $_POST['order']; 
$itemid = trim($_POST['id']); 
if (!empty ($itemid)) { 
    if ($order != $itemid) { 
        $query = mysql_query("update sortlist set sort='$itemid' where id=1"); 
        if ($query) { 
            echo $itemid; 
        } else { 
            echo "none"; 
        } 
    } 

首页index.php

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

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

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

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

 
include_once("connect.php"); 
 
$query=mysql_query("select * from sortlist where 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"> 
  <input type="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实现拖动布局并将排序结果保存到数据库的更多相关文章

  1. jquery.dragsort实现列表拖曳、排序

    在一次工作中需要将功能模块实现拖曳并且排序,并且将排序结果保存到数据库,用户下次登录后直接读取数据库排序信息进行显示.LZ找了好多插件,最后发现 jquery.dragsort 这款插件是最好使用的, ...

  2. 最好用的jquery列表拖动排列(由项目提取)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wuchengzeng/article/details/31766235 最好的jquery列表拖动排 ...

  3. Jquery 多行拖拽图片排序 jq优化

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 分享一个jQuery动态网格布局插件:Masonry(转)

    在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...

  5. 使用 JQuery 实现将 table 按照列排序

    使用 JQuery 实现将 table 按照列排序 使用 JQuery 实现将 table 按照列排序 代码如下 <!DOCTYPE html> <html> <head ...

  6. jquery可拖动表格调整列格子的宽度大小(转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Jquery DataTables 自定义布局sdom

    Jquery DataTables 自定义布局sdom JQuery Datatable sDom 配置 官网给的描述是: This initialisation variable allows yo ...

  8. JQuery Mobile 图片布局

    JQuery Mobile 图片布局 1.实现效果

  9. jQuery mobile网格布局

    3.4 内容格式化 jQuery Mobile中提供了许多非常有用的工具与组件,如多列的网格布局.折叠形的面板控制等,这些组件可以帮助开发者快速实现正文区域内容的格式化. 3.4.1 网格布局 jQu ...

随机推荐

  1. Unix/Linux环境C编程入门教程(34) 编程管理系统中的用户

    1.用户管理相关函数介绍 geteuid(取得有效的用户识别码) 相关函数 getuid,setreuid,setuid 表头文件 #include<unistd.h> #include& ...

  2. linux下设置ip地址 gw网关,dns的方法

    本文介绍下,在linux中设置IP地址.网关.dns的方法,有需要的朋友作个参考吧.   设置linux网络的方法有两种:第一种:使用命令修改(直接即时生效) 复制代码代码示例: ip and net ...

  3. 获取windows身份认证网站页面内容

    有些网站必须登录才能获取到页面内容. 代码如下,可获取数据. var url = "https://yunda-api-test.appspot.com/int/parcel?wait=tr ...

  4. 【POJ 1679 The Unique MST】最小生成树

    无向连通图(无重边),判断最小生成树是否唯一,若唯一求边权和. 分析生成树的生成过程,只有一个圈内出现权值相同的边才会出现权值和相等但“异构”的生成树.(并不一定是最小生成树) 分析贪心策略求最小生成 ...

  5. magento url rewrite

    Magento 设置 Rewrite Url 方法. 1.apache 要加载 Rewrite 扩展模块.2.网站根目录要有 .htaccess 文件.3.Magento 后台要设置启用 Rewrit ...

  6. [置顶] 深入浅出Spring(三) AOP详解

    上次的博文深入浅出Spring(二) IoC详解中,我为大家简单介绍了一下Spring框架核心内容中的IoC,接下来我们继续讲解另一个核心AOP(Aspect Oriented Programming ...

  7. 修改Chrome的User Agent的方法 真实有效

    如何修改Chrome的User Agent: 通过网络上查找,修改Chrome的Usre Agent有3种方式,但有的方式是不起作用的. 给Chrome添加启动参数(有作用) 通过扩展-User-Ag ...

  8. (转)c#对象内存模型

    对象内存模型 C#的对象内存模型写这篇博客的主要目的是为了加深自己的理解,如有不对的地方,请各位见谅. C#的对象内存模型: 一.栈内存和堆内存1.栈内存 由编译器自动分配和释放,主要用来保存一些局部 ...

  9. C# Web对文件的管理

    /// <summary> /// 创建新文件 /// </summary> /// <param name="parentPath">文件路径 ...

  10. WCF通信过程

    无废话WCF入门教程二[WCF应用的通信过程] 一.概述 WCF能够建立一个跨平台的安全.可信赖.事务性的解决方案,是一个WebService,.Net Remoting,Enterprise Ser ...