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_13_执行模型详解
Oct 20 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
Seajs源码详解分析
Apr 02 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 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极大的增强功能和性能
2006/10/09 PHP
PHP 事件机制(2)
2011/03/23 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
php-msf源码详解
2017/12/25 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
web前端开发也需要日志
2010/12/09 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
python使用mysql的两种使用方式
2018/03/07 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
英语系本科生个人求职信
2013/09/21 职场文书
总经理办公室主任岗位职责
2013/11/12 职场文书
教育学专业实习生的自我鉴定
2013/11/26 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
小学教师培训感言
2014/02/11 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
公司联欢会主持词
2015/07/04 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python