位置: 编程技术 - 正文
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
编辑：rootadmin推荐整理分享PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
想拖动页面上的层，完全可以用jQuery ui的Draggable方法来实现，那如何将拖动后层的位置保存下来呢？本文将给出答案。本文讲解了如何采用PHP+MySQL+jQuery，实现随意拖动层并即时保存拖动位置。
本文原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录，页面通过CSS解析每个层不同的位置。请看具体实现步骤。准备MySQL数据表首先需要准备一张表notes，用来记录层的内容，背景色和坐标等信息。
然后向表中插入几条记录，注意xyz字段表示的是层的xyz坐标的组合，格式为"x|y|z"。drag.php在drag.php中，需要读取notes表中的记录，显示在drag.php页面中，代码如下：
然后将读取出来的$notes现在在div中。
注意，我在生成的每个DIV.note中定义了位置，即设置该div的left,top和z-index值。CSS
有了样式之后，然后运行drag.php，这时就可以看到页面中排列的的几个层，但是还不能拖动，因为还要加入jQuery。jQuery首先需要载入jquery库和jquery-ui插件以及global.js。
然后再global.js加入代码：
global.js中，首先在$(function()里定义了一个变量tmp，通过判断每个div.note的z-index值，保证拖动时，该DIV在最上层（即z-index为最大值），就是不会被别的层覆盖。并且设置zIndex的初始值为0。接下来，写了一个函数make_draggable()；该函数调用jquery ui插件的Draggable方法，处理拖动范围，透明度及拖动停止后执行的更新操作。
当拖动时，将当前层的z-index属性设置为最大值，即保证当前层在最上面，不被其他层覆盖，并且设置了拖动范围和透明度，当停止拖动时，向后台update_position.php发送一个ajax请求，传递的参数有x,y,z和id的值。接下来我们来看update_position.php的处理。update_position.php保存拖动位置update_position.php需要做的是，获取前台通过ajax请求发来的数据，更新数据表中相应的字段内容。
标签: PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
本文链接地址:https://www.jiuchutong.com/biancheng/370395.html 转载请保留说明！
