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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
理解JavaScript原型链
Oct 25 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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
thinkphp循环结构用法实例
2014/11/24 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
动态添加option及createElement使用示例
2014/01/26 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
itchat接口使用示例
2017/10/23 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python如何定义带参数的装饰器
2018/03/20 Python
python基础教程项目三之万能的XML
2018/04/02 Python
python 编码规范整理
2018/05/05 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
中国梦的演讲稿
2014/01/08 职场文书
公司晚会策划方案
2014/05/17 职场文书
煤矿安全生产标语
2014/06/06 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书