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 相关文章推荐
jquery.validate使用攻略 第一部
Jul 01 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
Postman无法正常返回结果问题解决
Aug 28 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
Python银行系统实战源码
2019/10/25 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
采购部经理岗位职责
2014/02/10 职场文书
解除劳动合同协议书
2014/04/14 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
导游词之镇江焦山
2019/11/21 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python