如果要在页面上拖动图层，可以使用jQuery ui的Draggable方法。如何保存拖动图层的位置？本文将给出答案。阐述了如何使用PHP MySQL jQuery实现随机拖拽图层，即时保存拖拽位置。

本文的原理是通过拖动将被拖动的图层，即左、上、z-index的相对位置更新到数据表中对应的记录，页面通过CSS分析各图层的不同位置。具体实施步骤请看。准备MySQL数据表，需要准备一个表格备注，记录图层内容、背景颜色、坐标等信息。

CREATE TABLE IF NOT EXISTS ` notes `(` id ' int(11)NOT NULL auto _ increment，` content ' varchar(200)NOT NULL，` color` enum('黄色'，'蓝色'，'绿色')NOT NULL default '黄色'，` XYZ ' varchar(100)默认为NULL，PRIMARY KEY(` id `)) ENGINE=MyISAM DEFAULT CHARSET=utf8；然后在表格中插入几条记录，注意xyz字段以‘x | y | z’的格式表示图层xyz坐标的组合。在drag.php，您需要阅读笔记表中的记录，并将其显示在drag.php页面上。代码如下：

include _ once(' connect . PHP ')；//链接数据库$ notes=$ left=$ top=$ zindex=$ query=MySQL _ query(‘按id desc从notes订单中选择*)；while($ row=MySQL _ fetch _ array($ query)){ list($ left，$top，$zindex)=explode('| '，$ row[' XYZ '])；$纸币。=' div class='note '。$row['color']'style='left: '。$left。px；top :’。$top。px；z-index :’。$zindex。span class='data ' '。$row['id']。/span '。html specialchars($ row[' content '])。/div '；}然后读取的$notes现在在div中。

div class='demo '？php echo $ notes？/DIV注意，我在每个生成的div中定义了位置，也就是说，设置div的左索引、上索引和z索引值。半铸钢钢性铸铁(Cast Semi-Steel)。演示{ position:relative高度：500 px；margin:20pxborder:1px虚线#d3d3d3}。注意{ width:150px高度：150 px；位置：绝对；margin-top :150 px；padding:10px飞越：隐藏；cursor:movefont-size :16 px；线高：22 px；} .注释跨度{ margin:2px }。黄色{背景-颜色： # FDFB8C；border:1px固体# DEDC65} .蓝色{背景色-color : # A6E3FC；border:1px固体# 75C5E7} .绿色{背景色-color : # A5F 88B；border:1px固体# 98E775}有了样式之后，运行drag.php，然后可以看到页面上排列了几个图层，但是还不能拖动，因为要加入jQuery。jquery首先需要加载JQuery库、jquery-ui插件和global.js

脚本类型=' text/JavaScript ' src=' http : js/jquery . js '/script script类型=' text/JavaScript ' src=' http 3360 js/jquery-ui . min . js '/脚本，然后将代码添加到global.js:

$(function(){ var tmp；$('.注释')。每个(函数(){ tmp=$(this))。CSS(' z-index ')；if(tmpzIndex)zIndex=tmp；}) make_draggable($(')。注意')；});var zIndex=0；在global.js中，首先，变量tmp在$(function()中定义。通过判断每个DIV的z-index值，注意，保证拖动时div在顶层(即z-index最大)，即不会被其他层覆盖。并将zIndex的初始值设置为0。接下来，我编写了一个函数make _ draggable()。该函数调用jquery ui插件的Draggable方法，处理拖动范围、透明度以及拖动停止后的更新操作。

函数make _ draggable(elements){ elements。可拖动({ opa city 3360 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。帮手。查找(' span。数据').html())})；} });} 当拖动时，将当前层的z指数属性设置为最大值，即保证当前层在最上面，不被其他层覆盖，并且设置了拖动范围和透明度，当停止拖动时，向后台update_position.php发送一个创建交互式、快速动态网页应用的网页开发技术请求，传递的参数有x，y，z和编号的值。接下来我们来看update_position.php的处理更新_位置。服务器端编程语言（Professional Hypertext Preprocessor的缩写）保存拖动位置update_position.php需要做的是，获取前台通过创建交互式、快速动态网页应用的网页开发技术请求发来的数据，更新数据表中相应的字段内容。

include _ once(' connect。PHP’)；if(！is_numeric($_GET['id']) ||！is_numeric($_GET['x']) ||！is_numeric($_GET['y']) ||！is _ numeric($ _ GET[' z ']))die(' 0 ')；$ id=int val($ _ GET[' id '])；$ x=int val($ _ GET[' x '])；$ y=int val($ _ GET[' y '])；$ z=int val($ _ GET[' z '])；MySQL _ query('更新注释集XYZ=')。$ x“|”.$y.'| ' .$z.'' WHERE id=' .$ id)；回声"1";以上就是关于PHP MySQL jQuery如何实现随意拖动层并即时保存拖动位置的方法，希望对大家的学习有所帮助。