jQuery拖动布局其结果保存到数据库


Posted in Javascript onOctober 09, 2015

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

jQuery拖动布局其结果保存到数据库

很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置,也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的。当用户清空客户端的cookie或浏览器的cookie过期后,再次访问页面时,发现布局又还原成最初的状态。这种cookie记录的方式使用简单,但不适合像个人中心、管理系统主页的要求。
本例实现的效果:
通过拖动随意布局页面模块。
记录拖动后模块的位置,并记录到数据库中。
页面永久性布局,用任意浏览器在任意时候打开,页面布局不变。(除非用户再次更改模块的排序,跟cookie没有关系)。
原理
采用的拖动排序插件实现拖动效果。
将拖动后的模块的位置通过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插件提供了很多方法和参数配置,详情请查看
拖动完成要执行一个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 (!emptyempty ($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实现拖动布局并将排序结果保存到数据库的实现过程,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 #Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 #Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 #Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 #Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 #Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 #Javascript
js小数运算出现多位小数如何解决
Oct 08 #Javascript
You might like
php解决DOM乱码的方法示例代码
2016/11/20 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
js单例模式的两种方案
2013/10/22 Javascript
js密码强度校验
2015/11/10 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
简单解决Python文件中文编码问题
2015/11/22 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
python操作链表的示例代码
2020/09/27 Python
python Cartopy的基础使用详解
2020/11/01 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
大一自我鉴定范文
2013/12/27 职场文书
座谈会主持词
2014/03/20 职场文书
保密承诺书范文
2014/03/27 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
医生见习报告范文
2014/11/03 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
优秀教研组申报材料
2014/12/26 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
python分分钟绘制精美地图海报
2022/02/15 Python
nginx之内存池的实现
2022/06/28 Servers