jQuery拖动div、移动div、弹出层实现原理及示例

2019/6/29 22:38:13

编程Tag： 弹出层移动div 拖动div

本文主要是介绍jQuery拖动div、移动div、弹出层实现原理及示例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

代码演示：

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是绝对定位，然后检测鼠标事件就行了。嘿嘿。

这篇关于jQuery拖动div、移动div、弹出层实现原理及示例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery拖动div、移动div、弹出层实现原理及示例

相关编程文章