jQuery拖动div、移动div、弹出层实现原理及示例


Posted in Javascript onApril 08, 2014

代码演示:

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是绝对定位,然后检测鼠标事件就行了。嘿嘿。
Javascript 相关文章推荐
Javascript 圆角div的实现代码
Oct 15 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
原生JS实现拖拽效果
Dec 04 Javascript
javascript跨域的4种方法和原理详解
Apr 08 #Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 #Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 #Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 #Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 #Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 #Javascript
当达到输入长度时表单自动切换焦点
Apr 06 #Javascript
You might like
Protoss建筑一览
2020/03/14 星际争霸
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
PHP中overload与override的区别
2017/02/13 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
js变换显示图片的实例
2013/04/16 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python学习资料
2007/02/08 Python
Python做文本按行去重的实现方法
2016/10/19 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python保留小数位的三种实现方法
2020/01/07 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
python matlab库简单用法讲解
2020/12/31 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
Shell如何接收变量输入
2016/08/06 面试题
英语教师岗位职责
2014/03/16 职场文书
租房合同协议书
2014/04/09 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
小学运动会入场口号
2015/12/24 职场文书
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS
基于Python实现nc批量转tif格式
2022/08/14 Python