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 相关文章推荐
JS中的substring和substr函数的区别说明
May 07 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
vue实现计步器功能
Nov 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 for 循环语句使用方法详细说明
2010/05/09 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
javascript window对象属性整理
2009/10/24 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
python通过socket查询whois的方法
2015/07/18 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
中文专业求职信
2014/06/20 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python