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中实现依赖注入的思路分享
Jan 15 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
实现高性能javascript的注意事项
May 27 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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(7) php 字符串相关应用
2010/03/05 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php生成扇形比例图实例
2013/11/06 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
javascript 精粹笔记
2010/05/09 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
js编写选项卡效果
2017/05/23 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
python计算文本文件行数的方法
2015/07/06 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
司机岗位职责范本
2015/04/10 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python