PHP+MySQL+jQuery实现随意拖动层

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

之前我有文章:jQuery实现拖动布局并将排序结果保存到数据库,文中以项目为示例,讲解了实现拖动布局的方法。本文与之不同之处在于可以任意拖动页面位置,原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录,页面通过CSS解析每个层不同的位置。请看具体实现步骤。

PHP+MySQL+jQuery 

PHP+MySQL+jQuery PHP+MySQL+jQuery

准备MySQL数据表

首先需要准备一张表notes,用来记录层的内容,背景色和坐标等信息。

  1. CREATE TABLE IF NOT EXISTS `notes` (   
  2.   `id` int(11) NOT NULL auto_increment,   
  3.   `content` varchar(200) NOT NULL,   
  4.   `color` enum('yellow','blue','green') NOT NULL default 'yellow',   
  5.   `xyz` varchar(100) default NULL,   
  6.   PRIMARY KEY  (`id`)   
  7. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;  

然后向表中插入几条记录,注意xyz字段表示的是层的xyz坐标的组合,格式为"x|y|z"。

drag.php

在drag.php中,需要读取notes表中的记录,显示在drag.php页面中,代码如下:

  1. include_once('connect.php'); //链接数据库   
  2. $notes = '';     
  3. $left='';     
  4. $top='';     
  5. $zindex='';     
  6. $query = mysql_query("select * from notes order by id desc");   
  7. while($row=mysql_fetch_array($query)){   
  8.     list($left,$top,$zindex) = explode('|',$row['xyz']);    
  9.     $notes.= '   
  10.     <div class="note '.$row['color'].'" style="left:'.$left.'px;top:'.$top.'px;z-index:'   
  11. .$zindex.'">   
  12.         <span class="data">'.$row['id'].'.</span>'.htmlspecialchars($row['content']).'   
  13.     </div>';   
  14. }  

然后将读取出来的$notes现在在div中。

  1. <div class="demo">   
  2.     <?php echo $notes;?>   
  3. </div>  

注意,我在生成的每个DIV.note中定义了位置,即设置该div的left,top和z-index值。

CSS

  1. .demo{position:relative; height:500px; margin:20px; border:1px dotted #d3d3d3}   
  2. .note{width:150px; height:150px; position:absolute; margin-top:150px; padding:10px;   
  3.  overflow:hidden; cursor:move; font-size:16px; line-height:22px;}   
  4. .note span{margin:2px}   
  5.    
  6. .yellow{background-color:#FDFB8C;border:1px solid #DEDC65;}   
  7. .blue{background-color:#A6E3FC;border:1px solid #75C5E7;}   
  8. .green{background-color:#A5F88B;border:1px solid #98E775;}  

有了样式之后,然后运行drag.php,这时就可以看到页面中排列的的几个层,但是还不能拖动,因为还要加入jQuery。

jQuery

首先需要载入jquery库和jquery-ui插件以及global.js。

  1. <script type="text/javascript" src="js/jquery.js"></script>   
  2. <script type="text/javascript" src="js/jquery-ui.min.js"></script>  

然后再global.js加入代码:

  1. $(function(){   
  2.     var tmp;   
  3.        
  4.     $('.note').each(function(){   
  5.         tmp = $(this).css('z-index');   
  6.         if(tmp>zIndex) zIndex = tmp;   
  7.     })   
  8.     make_draggable($('.note'));   
  9. });   
  10. var zIndex = 0;  

global.js中,首先在$(function()里定义了一个变量tmp,通过判断每个div.note的z-index值,保证拖动时,该DIV在最上层(即z-index为***值),就是不会被别的层覆盖。

并且设置zIndex的初始值为0。

接下来,写了一个函数make_draggable();该函数调用jquery ui插件的Draggable方法,处理拖动范围,透明度及拖动停止后执行的更新操作。

  1. function make_draggable(elements){   
  2.     elements.draggable({   
  3.         opacity: 0.8,   
  4.         containment:'parent',   
  5.         start:function(e,ui){ ui.helper.css('z-index',++zIndex); },   
  6.         stop:function(e,ui){   
  7.             $.get('update_position.php',{   
  8.                   x        : ui.position.left,   
  9.                   y        : ui.position.top,   
  10.                   z        : zIndex,   
  11.                   id    : parseInt(ui.helper.find('span.data').html())   
  12.             });   
  13.         }   
  14.     });   
  15. }  

当拖动时,将当前层的z-index属性设置为***值,即保证当前层在最上面,不被其他层覆盖,并且设置了拖动范围和透明度,当停止拖动时,向后台update_position.php发送一个ajax请求,传递的参数有x,y,z和id的值。接下来我们来看update_position.php的处理。

update_position.php保存拖动位置

update_position.php需要做的是,获取前台通过ajax请求发来的数据,更新数据表中相应的字段内容。

  1. include_once('connect.php');   
  2. if(!is_numeric($_GET['id']) || !is_numeric($_GET['x']) || !is_numeric($_GET['y']) ||    
  3. !is_numeric($_GET['z']))   
  4. die("0");   
  5.    
  6. $id = intval($_GET['id']);   
  7. $x = intval($_GET['x']);   
  8. $y = intval($_GET['y']);   
  9. $z = intval($_GET['z']);   
  10.    
  11. mysql_query("UPDATE notes SET xyz='".$x."|".$y."|".$z."' WHERE id=".$id);   
  12.    
  13. echo "1";  

如此完成了拖动并实时保存的效果。

原文链接:http://www.helloweba.com/view-blog-120.html

【编辑推荐】

  1. jQuery拖动布局实现排序结果同步数据库
  2. jQuery的.bind()、.live()和.delegate()之间区别
  3. 分享7个用jQuery重写的经典在线小游戏
  4. 25个超棒的jQuery日历和日期选取插件
  5. 分享10个超炫的jQuery网站
责任编辑:陈贻新 来源: helloweba.com
相关推荐

2010-10-27 10:02:36

PHP

2010-10-25 10:07:48

jQuery

2011-03-23 10:21:10

jQuery

2011-05-18 13:43:52

jQueryAjaxPHP

2011-03-30 14:33:57

jQueryJavaScript

2010-12-28 13:44:12

PHPXMLjQuery

2017-10-11 18:17:06

大数据数据可视化前后端

2011-06-17 10:11:01

jQueryPHP

2009-12-29 18:02:26

SilverLight

2011-05-18 13:28:46

jQueryPHPAJAX

2009-05-04 09:13:52

PHPMySQL读写分离

2010-05-24 10:23:34

实现MySQL

2009-10-23 13:22:25

VB.NET实现拖动图

2010-05-19 14:54:33

2012-02-08 17:01:36

2010-12-28 13:12:28

PHP内存

2009-06-12 18:53:35

Django控制层Django表现层

2009-06-26 16:12:08

ThickboxjQuery

2012-06-07 15:14:52

jQuery

2009-09-01 10:35:59

C# WinForm控
点赞
收藏

51CTO技术栈公众号