<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
.nav{
height:30px;
background: #036663;
border-bottom:1px solid #369;
line-height: 30px;
padding-left:30px;
}
.nav a {
color:#fff;
text-align: center;
font-size:14px;
text-decoration: none;
}
.d-box{
400px;
height:300px;
border:5px solid #eee;
box-shadow:2px 2px 2px 2px #666;
position: absolute;
top:50%;
left:50%;
margin-top: -155px;
margin-left:-205px;
}
.hd{
100%;
height:25px;
background-color: #7c9299;
border-bottom:1px solid #369;
line-height: 25px;
color:white;
cursor: move;
}
#box_close{
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<a href="javascript:;" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
<div class="hd" id="drop">注册信息 (可以拖拽)
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
</body>
</html>
<script>
var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
startDrop(drop,box); // 鼠标放到 drop 但是移动 是 box
function startDrop(current,move) {
current.onmousedown = function(event) {
var event = event || window.event;
var x = event.clientX - move.offsetLeft - 205; // 记录当前盒子的x 位置
var y = event.clientY - move.offsetTop - 155; // // 记录当前盒子的y位置
document.onmousemove = function(event) {
var event = event || window.event;
move.style.left = event.clientX - x + "px";
move.style.top = event.clientY - y + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
document.onmouseup = function() { // 鼠标弹起之后， 鼠标继续移动不应该操作
document.onmousemove = null;
}
}