脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery拖动div、移动div、弹出层实现原理及示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
大概原理：
使p的posITion为绝对定位absolute，然后控制其top与left值，需要监听鼠标事件，主要用到mousedown, mouSEMove, mouseup。
在mousedown后，记录mousedown时鼠标与需要移动的p的位置，然后取得两者之差，得到在鼠标移动后，p的位置。即：
left = 当前鼠标位置.x - (鼠标点击时的.x值 - p的初始位置x值)
top = 当前鼠标位置.y - (鼠标点击时的.y值 - p的初始位置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;">
<p class="moveBar">
<p id="banner">按住此处移动当前p</p>
<p class="content">这里是其它内容</p>
</p>
<p class="footer">
<p align="center" class="label">ALL Rights Reserved Qing 版权所有</p>
</p>
<script>
jQuery(document).ready(
function () {
$('#banner').mousedown(
function (event) {
VAR isMove = true;
var abs_x = event.pageX - $('p.moveBar').offset().left;
var abs_y = event.pageY - $('p.moveBar').offset().top;
$(document).mousemove(function (event) {
if (isMove) {
var obj = $('p.moveBar');
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
}
}
).mouseup(
function () {
isMove = false;
}
);
}
);
}
);
</script>
</body>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery拖动div、移动div、弹出层实现原理及示例全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery拖动div、移动div、弹出层实现原理及示例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。