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 另一种图片滚动切换效果思路
Apr 20 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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 fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
Python正规则表达式学习指南
2016/08/02 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
Python数据可视化图实现过程详解
2020/06/12 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
入党积极分子自我鉴定
2014/02/18 职场文书
英语教师岗位职责
2014/03/16 职场文书
小学六年级学生评语
2014/04/22 职场文书
高中课程设置方案
2014/05/28 职场文书
敬老院标语
2014/06/27 职场文书
2014年英语工作总结
2014/12/20 职场文书
2015年药房工作总结
2015/04/25 职场文书
工作后的感想
2015/08/07 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python