您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jQuery拖动div、移动div、弹出层实现原理及示例
作者：佚名 责任编辑：admin 更新时间：2022-06-22
正如标题所言的实现原理是使div的position为绝对定位absolute，然后控制其top与left值,需要的朋友可以参考下
代码演示： http://www.imqing.com/demo/movediv.html 大概原理： 使div的position为绝对定位absolute，然后控制其top与left值，需要监听鼠标事件，主要用到mousedown, mousemove, mouseup。 在mousedown后，记录mousedown时鼠标与需要移动的div的位置，然后取得两者之差，得到在鼠标移动后，div的位置。即： left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始位置y值) 代码： 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Qing's Web</title> <script src="./jquery-1.7.2.min.js" type="text/javascript"></script> <style type="text/css"> .footer { position: fixed; bottom: 0; width: 100%; } .moveBar { position: absolute; width: 250px; height: 300px; background: #666; border: solid 1px #000; } #banner { background: #52CCCC; cursor: move; } </style> </head> <body style="padding-top: 50px;"> <div class="moveBar"> <div id="banner">按住此处移动当前div</div> <div class="content">这里是其它内容</div> </div> <div class="footer"> <p align="center" class="label">ALL Rights Reserved Qing 版权所有</p> </div> <script> jQuery(document).ready( function () { $('#banner').mousedown( function (event) { var isMove = true; var abs_x = event.pageX - $('div.moveBar').offset().left; var abs_y = event.pageY - $('div.moveBar').offset().top; $(document).mousemove(function (event) { if (isMove) { var obj = $('div.moveBar'); obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); } } ).mouseup( function () { isMove = false; } ); } ); } ); </script> </body> </html> 其实代码量也不多的，嘿嘿。要点就是需要移动的div的position是绝对定位，然后检测鼠标事件就行了。嘿嘿。- 上一个程序编程： jquery查找父元素、子元素
- 下一个程序编程： 模拟用户点击弹出新页面不会被浏览器拦截
