PHP+jQuery实现随意拖动层并即时保存拖动位置


Posted in Javascript onApril 30, 2015

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

PHP+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";

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
js实现按座位号抽奖
Apr 05 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
jquery实现键盘左右翻页特效
Apr 30 #Javascript
jquery Validation表单验证使用详解
Sep 12 #Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 #Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 #Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 #Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 #Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 #Javascript
You might like
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
picChange 图片切换特效的函数代码
2010/05/06 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
python基础教程之循环介绍
2014/08/29 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
python监控文件或目录变化
2016/06/07 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
对python周期性定时器的示例详解
2019/02/19 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
Internal修饰符有什么含义
2013/07/10 面试题
中学教师实习自我鉴定
2013/09/28 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
python开发实时可视化仪表盘的示例
2021/05/07 Python
golang特有程序结构入门教程
2021/06/02 Python