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 学习笔记二 字符串拼接
Mar 28 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
详解jQuery事件
Jan 13 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
Vue封装的组件全局注册并引用
Jul 24 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 格式化数字的时候注意数字的范围
2010/04/13 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python实现自动发送报警监控邮件
2018/06/21 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Python测试线程应用程序过程解析
2019/12/31 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
大学毕业自我评价
2014/02/02 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
狮子林导游词
2015/02/03 职场文书
人事任命通知书
2015/04/21 职场文书
遗愿清单观后感
2015/06/09 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL