PHP+MySQL+jQuery实现拖动并保存拖动层位置

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

　　准备MySQL数据表

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

　　CREATE TABLE IF NOT EXISTS `notes` (

　　`id` int(11) NOT NULL auto_increment,

　　`content` varchar(200) NOT NULL,

　　`color` enum(&＃39;yellow&＃39;,&＃39;blue&＃39;,&＃39;green&＃39;) NOT NULL default &＃39;yellow&＃39;,

　　`xyz` varchar(100) default NULL,

　　PRIMARY KEY (`id`)

　　) ENGINE=MyISAM DEFAULT CHARSET=utf

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

　　drag.php

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

include_once(&＃39;connect.php&＃39;); //链接数据库
$notes = &＃39;&＃39;;  
$left=&＃39;&＃39;;  
$top=&＃39;&＃39;;  
$zindex=&＃39;&＃39;;  
$query = mysql_query("select * from notes order by id desc");
while($row=mysql_fetch_array($query)){
    list($left,$top,$zindex) = explode(&＃39;|&＃39;,$row[&＃39;xyz&＃39;]); 
    $notes.= &＃39;
   

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

　　$(&＃39;.note&＃39;).each(function(){

　　tmp = $(this).css(&＃39;z-index&＃39;);

　　if(tmp>zIndex) zIndex = tmp;

　　})

　　make_draggable($(&＃39;.note&＃39;));

　　});

　　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:&＃39;parent&＃39;,

　　start:function(e,ui){ ui.helper.css(&＃39;z-index&＃39;,++zIndex); },

　　stop:function(e,ui){

　　$.get(&＃39;update_position.php&＃39;,{

　　x : ui.position.left,

　　y : ui.position.top,

　　z : zIndex,

　　id : parseInt(ui.helper.find(&＃39;span.data&＃39;).html())

　　});

　　}

　　});

　　}

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

　　update_position.php保存拖动位置

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

　　include_once(&＃39;connect.php&＃39;);

　　if(!is_numeric($_GET[&＃39;id&＃39;]) || !is_numeric($_GET[&＃39;x&＃39;]) || !is_numeric($_GET[&＃39;y&＃39;]) ||

　　!is_numeric($_GET[&＃39;z&＃39;]))

　　die("0");

　　$id = intval($_GET[&＃39;id&＃39;]);

　　$x = intval($_GET[&＃39;x&＃39;]);

　　$y = intval($_GET[&＃39;y&＃39;]);

　　$z = intval($_GET[&＃39;z&＃39;]);

　　mysql_query("UPDATE notes SET xyz=&＃39;".$x."|".$y."|".$z."&＃39; WHERE id=".$id);

　　echo "1";