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 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
js的对象与函数详解
Jan 21 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
smarty简单应用实例
2015/11/03 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
会计电算化专业个人的自我评价
2013/11/24 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
抄作业检讨书
2014/02/17 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
联片教研活动总结
2014/07/01 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
golang json数组拼接的实例
2021/04/28 Golang
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Win11软件图标固定到任务栏
2022/04/19 数码科技
volatile保证可见性及重排序方法
2022/08/05 Java/Android