PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解


Posted in Javascript onOctober 09, 2015

想拖动页面上的层,完全可以用jQuery ui的Draggable方法来实现,那如何将拖动后层的位置保存下来呢?本文将给出答案。本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置。

PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解

本文原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录,页面通过CSS解析每个层不同的位置。请看具体实现步骤。
准备MySQL数据表
首先需要准备一张表notes,用来记录层的内容,背景色和坐标等信息。

CREATE TABLE IF NOT EXISTS `notes` ( 
 `id` int(11) NOT NULL auto_increment, 
 `content` varchar(200) NOT NULL, 
 `color` enum('yellow','blue','green') NOT NULL default 'yellow', 
 `xyz` varchar(100) default NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

然后向表中插入几条记录,注意xyz字段表示的是层的xyz坐标的组合,格式为"x|y|z"。
drag.php
在drag.php中,需要读取notes表中的记录,显示在drag.php页面中,代码如下:

include_once('connect.php'); //链接数据库 
$notes = '';  
$left='';  
$top='';  
$zindex='';  
$query = mysql_query("select * from notes order by id desc"); 
while($row=mysql_fetch_array($query)){ 
  list($left,$top,$zindex) = explode('|',$row['xyz']); 
  $notes.= ' 
  <div class="note '.$row['color'].'" style="left:'.$left.'px;top:'.$top.'px;z-index:' 
.$zindex.'"> 
    <span class="data">'.$row['id'].'.</span>'.htmlspecialchars($row['content']).' 
  </div>'; 
}

然后将读取出来的$notes现在在div中。

<div class="demo"> 
  <?php echo $notes;?> 
</div>

注意,我在生成的每个DIV.note中定义了位置,即设置该div的left,top和z-index值。
CSS

.demo{position:relative; height:500px; margin:20px; border:1px dotted #d3d3d3} 
.note{width:150px; height:150px; position:absolute; margin-top:150px; padding:10px; 
 overflow:hidden; cursor:move; font-size:16px; line-height:22px;} 
.note span{margin:2px} 
 
.yellow{background-color:#FDFB8C;border:1px solid #DEDC65;} 
.blue{background-color:#A6E3FC;border:1px solid #75C5E7;} 
.green{background-color:#A5F88B;border:1px solid #98E775;}

有了样式之后,然后运行drag.php,这时就可以看到页面中排列的的几个层,但是还不能拖动,因为还要加入jQuery。
jQuery
首先需要载入jquery库和jquery-ui插件以及global.js。

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

然后再global.js加入代码:

$(function(){ 
  var tmp; 
   
  $('.note').each(function(){ 
    tmp = $(this).css('z-index'); 
    if(tmp>zIndex) zIndex = tmp; 
  }) 
  make_draggable($('.note')); 
}); 
var zIndex = 0;

global.js中,首先在$(function()里定义了一个变量tmp,通过判断每个div.note的z-index值,保证拖动时,该DIV在最上层(即z-index为最大值),就是不会被别的层覆盖。
并且设置zIndex的初始值为0。
接下来,写了一个函数make_draggable();该函数调用jquery ui插件的Draggable方法,处理拖动范围,透明度及拖动停止后执行的更新操作。

function make_draggable(elements){ 
  elements.draggable({ 
    opacity: 0.8, 
    containment:'parent', 
    start:function(e,ui){ ui.helper.css('z-index',++zIndex); }, 
    stop:function(e,ui){ 
      $.get('update_position.php',{ 
         x   : ui.position.left, 
         y   : ui.position.top, 
         z   : zIndex, 
         id  : parseInt(ui.helper.find('span.data').html()) 
      }); 
    } 
  }); 
}

当拖动时,将当前层的z-index属性设置为最大值,即保证当前层在最上面,不被其他层覆盖,并且设置了拖动范围和透明度,当停止拖动时,向后台update_position.php发送一个ajax请求,传递的参数有x,y,z和id的值。接下来我们来看update_position.php的处理。
update_position.php保存拖动位置
update_position.php需要做的是,获取前台通过ajax请求发来的数据,更新数据表中相应的字段内容。

include_once('connect.php'); 
if(!is_numeric($_GET['id']) || !is_numeric($_GET['x']) || !is_numeric($_GET['y']) || 
!is_numeric($_GET['z'])) 
die("0"); 
 
$id = intval($_GET['id']); 
$x = intval($_GET['x']); 
$y = intval($_GET['y']); 
$z = intval($_GET['z']); 
 
mysql_query("UPDATE notes SET xyz='".$x."|".$y."|".$z."' WHERE id=".$id); 
 
echo "1";

以上就是关于PHP+MySQL+jQuery如何实现随意拖动层并即时保存拖动位置的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript中match函数的用法小结
Feb 08 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 #Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 #Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 #Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 #Javascript
jQuery实现连续动画效果实例分析
Oct 09 #Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 #Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 #Javascript
You might like
学习使用PHP数组
2006/10/09 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
详解vue axios用post提交的数据格式
2018/08/07 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
python生成二维码的实例详解
2017/10/29 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
利用python生成照片墙的示例代码
2020/04/09 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
农民致富事迹材料
2014/01/23 职场文书
委托书格式
2014/08/01 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
食堂管理制度范本
2015/08/04 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书