PHP+MySQL+jQuery实现拖动并保存拖动层位置
| -ui.min.js"></script>
然后再global.js加入代码：
$(function(){ var tmp; $('.note').each(function(){ tmp = $(this).css('z-index'); if(tmp>zIndex) zIndex = tmp; }) make_draggable($('.note')); }); 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:'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.helper.find('span.data').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'); if(!is_numeric(
 Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved 地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁） 邮编(ZIP)：361008 电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134 《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号
Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved 地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁） 邮编(ZIP)：361008 电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134 《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号
Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved 地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁） 邮编(ZIP)：361008 电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134 《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号
!is_numeric(
Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved 地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁） 邮编(ZIP)：361008 电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134 《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号
die("0"); $id = intval(
Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved 地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁） 邮编(ZIP)：361008 电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134 《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号
$x = intval(
Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved 地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁） 邮编(ZIP)：361008 电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134 《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号
$y = intval(
Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved 地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁） 邮编(ZIP)：361008 电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134 《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号
$z = intval(
Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved 地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁） 邮编(ZIP)：361008 电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134 《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号
mysql_query("UPDATE notes SET xyz='".$x."|".$y."|".$z."' WHERE id=".$id); echo "1"; |
||||||||||||||||||||||||||||||||||||||||
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |