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的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
flask项目集成swagger的方法
2020/12/09 Python
全球工业:Global Industrial
2020/02/01 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
擅自离岗检讨书
2014/09/12 职场文书
售后服务质量承诺书
2015/04/29 职场文书
暑期工社会实践报告
2015/07/13 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android