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 相关文章推荐
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
深入浅析react native es6语法
Dec 09 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
angular4+百分比进度显示插件用法示例
May 05 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
PHP Stream_*系列函数
2010/08/01 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python的print用法示例
2014/02/11 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
flask session组件的使用示例
2018/12/25 Python
Python求离散序列导数的示例
2019/07/10 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
会计专业应届生求职信
2013/11/24 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
机械机修工岗位职责
2014/08/03 职场文书
公司周年庆典标语
2014/10/07 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL