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

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

桐梓ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

准备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.= '     
  
  
        
  
  
  
.$zindex.'">     
  
  
          '.$row['id'].'.'.htmlspecialchars($row['content']).'

}

然后将读取出来的$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。

然后再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";

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

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

【编辑推荐】

jQuery拖动布局实现排序结果同步数据库
jQuery的.bind()、.live()和.delegate()之间区别
分享7个用jQuery重写的经典在线小游戏
25个超棒的jQuery日历和日期选取插件
分享10个超炫的jQuery网站

当前文章：PHP+MySQL+jQuery实现随意拖动层
文章位置：http://www.hantingmc.com/qtweb/news1/213451.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联