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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
js检测用户输入密码强度
Oct 22 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
浅谈js的异步执行
Oct 18 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
python实现指定字符串补全空格的方法
2015/04/30 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python简单贪吃蛇开发
2019/01/28 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
Python之字典添加元素的几种方法
2020/09/30 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
Weblogic的布署方式
2013/08/23 面试题
煤矿安全承诺书
2014/05/22 职场文书
委托书范本
2014/09/13 职场文书
求职信格式范文
2015/03/19 职场文书
病危通知书样本
2015/04/17 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
Python实现拼音转换
2021/06/07 Python
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers