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 相关文章推荐
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
动态加载js文件简单示例
Apr 21 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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下过滤HTML代码的函数
2007/12/10 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
Python里隐藏的“禅”
2014/06/16 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
详解Python中的四种队列
2018/05/21 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
使用python画社交网络图实例代码
2019/07/10 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
Java编程面试题
2016/04/04 面试题
《长城和运河》教学反思
2014/04/14 职场文书
家长通知书家长评语
2014/04/17 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
美元符号 $
2022/02/17 杂记