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 相关文章推荐
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
详解javascript中的Error对象
Apr 25 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
javascript设计模式之装饰者模式
Jan 30 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 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
php自动加载autoload机制示例分享
2014/02/20 PHP
php返回json数据函数实例
2014/10/09 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
html读出文本文件内容
2007/01/22 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
回顾Javascript React基础
2019/06/15 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
webpack5 联邦模块介绍详解
2020/07/08 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
python executemany的使用及注意事项
2017/03/13 Python
详解django中自定义标签和过滤器
2017/07/03 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
新闻学专业应届生求职信
2013/11/08 职场文书
安全大检查反思材料
2014/01/31 职场文书
追悼会答谢词
2015/01/05 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
MySql数据库 查询时间序列间隔
2022/05/11 MySQL
MySQL导致索引失效的几种情况
2022/06/25 MySQL