<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="/js/jquery-3.2.1.min.js" type="text/javascript"></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 class="moveBar">
<div id="banner">按住此处移动当前div</div>
<div class="content">这里是其它内容</div>
</div>
<script>
jQuery(document).ready(
function() {
$('#banner').mousedown(
function(event) {
$(".moveBar").css("margin","0px")
var isMove = true;
var abs_x = event.pageX - ($('div.moveBar').offset().left+50);
var abs_y = event.pageY - ($('div.moveBar').offset().top+50);
$(document).mousemove(function(event) {
if(isMove) {
var obj = $('.moveBar');
obj.css({
'left': event.pageX - abs_x,
'top': event.pageY - abs_y
});
}
}).mouseup(
function() {
var obj = $('.moveBar');
//还原样式，并获取
obj.css({
'left': $('div.moveBar').offset().left-50,
'top': $('div.moveBar').offset().top-50
});
$(".moveBar").css("margin-left","50px")
$(".moveBar").css("margin-top","50px")
isMove = false;
}
);
}
);
}
);
</script>
</body>
</html>
