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 URL参数读取改进版
Jan 16 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
jquery validation验证表单插件
Jan 07 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
JS实现页面侧边栏效果探究
Jan 08 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
input 高级限制级用法
2009/03/26 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
初识Node.js
2015/03/20 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
Python实现翻转数组功能示例
2018/01/12 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
python3中eval函数用法使用简介
2019/08/02 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python通过Pillow实现图片对比
2020/04/29 Python
初三班主任寄语大全
2014/04/04 职场文书
国际贸易专业求职信
2014/06/04 职场文书
大学生赌博检讨书
2014/09/22 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python