您的位置：首页 > Web前端 > JQuery

jQuery拖动div，移动div，弹出层

2012-09-19 19:04 441 查看

之前一直想自己来写个拖动div的js代码，一直没动手，昨晚写了一下，然后百度了一下相关的文章，发现貌似不太详细？？

代码演示：

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是绝对定位，然后检测鼠标事件就行了。嘿嘿。
本文出自 “Qing's web” 博客，请务必保留此出处http://qings.blog.51cto.com/4857138/998878

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航