例子，jquery拖动div、移动div与弹出层。
<!DOCTYPE html>
<html lang="zh">
<head>
<title>
jQuery拖动div、移动div、弹出层示例
</title>
<script src="jquery-1.9.1.min.js" type="text/javascript">
</script>
<style type="text/css">
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
right: 20px;
}
#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>
<script>
var moveBar = ".moveBar";
var banner = "#banner";
jQuery(document).ready(function() {
$(banner).mousedown(function(event) {
var isMove = true;
var abs_x = event.pageX - $(moveBar).offset().left;
var abs_y = event.pageY - $(moveBar).offset().top;
$(document).mousemove(function(event) {
if (isMove) {
var obj = $(moveBar);
obj.css({
'left': event.pageX - abs_x,
'top': event.pageY - abs_y
});
}
}).mouseup(function() {
isMove = false;
});
});
});
</script>
</body>
</html>