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下判断IE与FF的比较简单的方式
Oct 17 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
用console.table()调试javascript
Sep 04 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
canvas实现探照灯效果
Feb 07 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 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网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
提高网站信任度的技巧
2008/10/17 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
js插件实现图片滑动验证码
2020/09/29 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
使用Python实现批量ping操作方法
2020/05/06 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
幼儿园户外活动总结
2014/07/04 职场文书
基层工作经验证明样本
2014/11/16 职场文书
创业计划书之网络外卖
2019/10/31 职场文书