这次给大家带来jquery实现div拖拽效果功能（附代码），jquery实现div拖拽效果功能的注意事项有哪些，下面就是实战案例，一起来看一下。
无标题文档 #Drigging {width:200px;background:#CCC;border:solid 1px #666;height:80px;line-height:80px;text-align:center;position:absolute;}$(function(){ var bool=false; //标识是否移动元素var offsetX=0; //声明p在当前窗口的Left值var offsetY=0; //声明p在当前窗口的Top值$("#Drigging").mouseover(function(){$(this).css('cursor','move');//当鼠标移动到拖拽的p上的时候，将鼠标的样式设置为移动(move)})$("#Drigging").mousedown(function(){ bool=true; //当鼠标在移动元素按下的时候将bool设定为true offsetX = event.offsetX; //获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetX offsetY = event.offsetY; //获取鼠在当前窗口的相对偏移位置的Top值并赋值给offsetY $(this).css('cursor','move'); }).mouseup(function(){bool=false;//当鼠标在移动元素起来的时候将bool设定为false})$(document).mousemove(function(){if(!bool)//如果bool为false则返回return;//当bool为true的时候执行下面的代码var x = event.clientX-offsetX;//event.clientX得到鼠标相对于客户端正文区域的偏移//然后减去offsetX即得到当前推拽元素相对于当前窗口的X值//（减去鼠标刚开始拖动的时候在当前窗口的偏移X）var y = event.clientY-offsetY;//event.clientY得到鼠标相对于客户端正文区域的偏移//然后减去offsetX即得到当前推拽元素相对于当前窗口的Y值//（减去鼠标刚开始拖动的时候在当前窗口的偏移Y）$("#Drigging").css("left", x);$("#Drigging").css("top", y);$("#Drigging").css('cursor','move');})})拖拽层
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Json操作日期格式
Jsonp怎样才能解决ajax跨域
不使用插件让Ajax实现异步刷新
以上就是jquery实现div拖拽效果功能（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2767846.html
