<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标拖动</title>
<style>
body{margin: 0}
.box{
width: 400px;height: 300px;border:5px solid #eee;
box-shadow: 2px 2px 2px 2px #666;position: absolute;top: 30%;left: 30%;}
.hd{width: 100%;height: 25px;background-color: #7c9299;
border-bottom: 1px solid #369;line-height: 25px;color: #fff;cursor: move;}
#box_close{float: right;cursor: pointer}
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="drop" class="hd">
注册信息（可以拖拽）
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
<script>
var box=document.getElementById('box');
var drop=document.getElementById('drop');
drop.onmousedown=function(event){
var event=event||window.event;
var pageX=event.pageX||event.clientX+
document.documentElement.scrollLeft;
var pageY=event.pageY||event.clientY+
document.documentElement.scrollTop;
var spaceX=pageX - box.offsetLeft;
var spaceY=pageY - box.offsetTop;
document.onmousemove=function(event){
var event=event||window.event;
var pageX=event.pageX||event.clientX+
document.documentElement.scrollLeft;
var pageY=event.pageY||event.clientY+
document.documentElement.scrollTop;
box.style.left=pageX-spaceX+'px';
box.style.top=pageY-spaceY+'px';
window.getSelection ? window.getSelection().removeAllRanges():
document.selection.empty();
};
};
document.onmouseup=function(){
document.onmousemove=null;
};
</script>
</body>
</html>
