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 encodeURI和encodeURIComponent的比较
Apr 03 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 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中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
js继承实现方法详解
2016/12/16 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
就业协议书怎么填
2014/09/15 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android