jQuery实现了随机拖动层，并立即保存拖动位置。

如果你想拖动层的网页上，你可以用jQuery UI的可拖动的方法做。如何保存拖动图层的位置这篇文章给出了答案，本文介绍了如何使用mysql来实现随机拖动层，并立即保存拖动位置。
在我有一篇文章之前：在本文中，使用了一个项目来解释如何拖动布局。其原理是拖拖左的相对位置，在数据表中的相应记录上的特性。通过CSS对三层的不同位置进行解析，请参阅具体的实现步骤。

准备MySQL数据表

首先，你需要准备一个表格笔记来记录图层的内容、背景颜色和坐标等。

如果不存在，创建表（注释）
` ID ` int（11）不为空auto_increment，
`内容` varchar（200）不为空，
`颜色`枚举（''，'蓝色'，‘绿色'）不为空default'yellow，
` XYZ ` varchar（100）默认为空，
主键（id）
= MyISAM引擎默认的字符集utf8）；
然后几个记录插入表格，并注意XYZ字段表示一个组合的XYZ坐标的层，这就是X Y Z | | 。

drag.php

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

include_once（'connect。php）； / /数据库链接。
美元=；
左=；
顶部=；
在美元=；
为查询= mysql_query（SELECT * FROM笔记订单ID号）；
而（$行= mysql_fetch_array（$查询））{
列表（$左顶部美元，在美元）=爆炸（| '，' } { $行'xyz）；
美元=
＜div class=注。$行{色彩}。style=左。为左。'px；顶部：美元的顶部。'px；Z指数：'
。在美元。>
。$行{ 'id' }。' '。htmlspecialchars（$行{ 'content' }）。
'；
}
然后读笔记现在在学美元


请注意，我定义的位置在每一个div.note我已经产生，即设置左，前，和DIV的z-index值

CSS

。演示{位置：相对；身高：500px；保证金：20px；边界：1px点缀# d3d3d3 }
注：150px {宽度；高度：150px；位置：绝对的；边缘上：150px；填充：10px；
溢出：隐藏；光标：移动；字体大小：16px；线高度：22px；}
。注意跨度{保证金：2px }

。黄{背景颜色：# fdfb8c；边框1px solid # dedc65；}
蓝色{背景颜色：# a6e3fc；边框1px solid # 75c5e7；}
。绿色{背景颜色：# a5f88b；边框1px solid # 98e775；}
在你的风格，然后运行drag.php，你可以在页面中看到好几层，但你不能拖，因为添加jQuery。

jQuery

首先，你需要加载jQuery库和jQuery UI插件，以及global.js。


然后global.js添加代码：

$（函数（）{（））
VaR TMP；

$（注释）。每个（函数（）{）
TMP = $（this）。Css（'z-index）；
如果（TMP >在zIndex = TMP）；
}）
make_draggable（$（'注意'））；
}）；
VaR在= 0；
在global.js，首先，一个变量TMP在函数定义（）。通过判断每个div.note z-index值，这是保证div在顶层（即Z指数是最大值）当它拖，它不会被其他层。

而在初始值设置为0。

接下来，我们写一个函数make_draggable（），调用jQuery UI插件处理拖动范围的更新操作的拖动方法，透明度和拖动停止。

功能make_draggable（元素）{
elements.draggable（{
不透明性：0.8，
遏制：'parent，
开始：功能（E，UI）{ ui.helper.css（'z-index '，+ +在）；}，
停止：函数（e，UI）{
美元。得到（'update_position。php，{
X：ui.position.left，
Y：ui.position.top，
Z：在，
ID：parseInt（ui.helper.find（'span。数据）。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）；
如果（！is_numeric（$ _get { 'id' }）| |！is_numeric（$ _get { x }）is_numeric（$ _get { Y }）| | | |！
is_numeric（$ _get { Z }））
模具（0 ）；

ID = intval美元（美元_get { 'id' }）；
X元= intval（$ _get { x }）；
Y = intval美元（美元_get { Y }）；
Z = intval美元（美元_get { Z }）；

mysql_query（更新设置XYZ =。美元。| ，| Y美元。$ Z.id是美元。ID）；

1；
以上是本文的全部内容，希望大家能喜欢。