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 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Angular2入门--架构总览
Mar 29 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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关键字仅替换一次的实现函数
2015/10/29 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
php实现等比例压缩图片
2018/07/26 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
使用python实现tcp自动重连
2017/07/02 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
基于Pytorch SSD模型分析
2020/02/18 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
在C#中如何实现多态
2014/07/02 面试题
管理站站长岗位职责
2013/11/27 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python