PHP MySQL jQuery随意拖动层并即时保存拖动位置实例讲解

想拖动页面上的层，完全可以用jQuery ui的Draggable方法来实现，那如何将拖动后层的位置保存下来呢？本文将给出答案。本文讲解了如何采用PHP MySQL 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.=