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 核心参考教程 内置对象
Oct 13 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
javascript 网页跳转的方法
2008/12/24 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
JavaScript实现区块链
2018/03/14 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
新手该如何学python怎么学好python?
2008/10/07 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Python的argparse库使用详解
2018/10/09 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
详解python播放音频的三种方法
2019/09/23 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Python Merge函数原理及用法解析
2020/09/16 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
安全责任书范文
2014/08/25 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL