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创建快捷方式的简单实例
Aug 09 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 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统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
javascript multibox 全选
2009/03/22 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
原生js实现瀑布流效果
2020/03/09 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
golang/python实现归并排序实例代码
2020/08/30 Python
python中uuid模块实例浅析
2020/12/29 Python
ddl,dml和dcl的含义
2016/05/08 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
普通员工辞职信
2014/01/17 职场文书
高效课堂标语
2014/06/26 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
python数字图像处理之图像的批量处理
2022/06/28 Python