<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
#nav {
height: 30px;
line-height: 30px;
background-color: darkblue;
padding-left: 20px;
}
#nav a {
color: #fff;
text-decoration: none;
}
#box {
width: 400px;
height: 300px;
border: 1px solid #000;
position: absolute;
left: 40%;
top: 35%;
}
#hd {
background-color: darkblue;
height: 30px;
line-height: 30px;
color: #fff;
padding-left: 10px;
cursor: move;
}
#hd span {
cursor: pointer;
float: right;
}
</style>
<script src="js/common.js"></script>
</head>
<body>
<div id="nav"><a href="javascript:void(0)">注册信息</a></div>
<div id="box">
<div id="hd">注册信息(可以拖拽)<span id="box_close">【关闭】</span></div>
<div id="bd"></div>
</div>
<script>
var box = document.getElementById('box');
var hd = document.getElementById('hd');
var positionX, positionY, offsetX, offsetY, mouseX, mouseY;
hd.onmousedown = function (e) {
e = e || window.event;
// 鼠标在盒子中的位置 = 鼠标按下时在页面中的坐标 - 盒子在页面中的偏移
mouseX = getPage(e).pageX - box.offsetLeft;
mouseY = getPage(e).pageY - box.offsetTop;
// 鼠标移动的时候,盒子在页面中的偏移 = 鼠标当前位置-鼠标在盒子中的位置
box.onmousemove = function (e) {
e = e || window.event;
boxX = getPage(e).pageX - mouseX;
boxY = getPage(e).pageY - mouseY;
box.style.left = boxX + 'px';
box.style.top = boxY + 'px';
}
}
// 鼠标弹起,移除移动事件
document.onmouseup = function () {
box.onmousemove = null;
}
// 点击关闭按钮,盒子隐藏
var box_close = document.getElementById('box_close');
box_close.onclick = function () {
box.style.display = 'none';
}
</script>
</body>
</html>