`
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="../test02/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
margin: 50px;
left: 200px;
top: 200px;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body>
<div style="width: 500px;height: 500px;">
<div class="moveBar">
<div id="banner">按住此处移动当前div</div>
<div class="content">这里是其它内容</div>
</div>
</div>
< script>
var obj = $(".moveBar");
//设置鼠标移入的样式
$('#banner').mouseenter(function() {
obj.css('margin', '0px');
obj.css({
'left': $('div.moveBar').offset().left + 50,
'top': $('div.moveBar').offset().top + 50
})
})
//鼠标移出的样式
$('#banner').mouseout(function() {
obj.css({
'left': $('div.moveBar').offset().left - 50,
'top': $('div.moveBar').offset().top - 50
})
obj.css('margin-left', '50px');
obj.css('margin-top', '50px');
})
//
$(document).ready(function() {
$('#banner').mousedown(function(event) {
var isMove = true;
//设置每次移动的距离
var abs_x, abs_y;
abs_x = event.pageX - $('div.moveBar').offset().left;
abs_y = event.pageY - $('div.moveBar').offset().top;
//console.log('abs_x'+abs_x+'abx-y'+abs_y);
//添加移动事件
$(document).mousemove(function(event) {
if(isMove) {
obj.css({
'left': event.pageX - abs_x,
'top': event.pageY - abs_y
})
}
//当移动停止时，释放
}).mouseup(function() {
isMove = false;
})
})
})
</script>
</body>
</html> `