思路：
- onmousedown ：鼠标按下的时候，记录鼠标所在的位置pageX,pageY
记录鼠标相对于盒子的位置距离 - onmousemove ：鼠标移动的时候，实时计算鼠标的位置 - 相对差量（鼠标对于盒子）来计算鼠标的位置
- onmouseup：清空onmousemove 的方法
PS
event.pageX,event.pageY 相对于整个文档（包括被卷起来部分）左上角的距离
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽</title>
<style type="text/css">
#box{
position:fixed;
left:100px;
top:100px;
background-color:red;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="out"></div>
<script>
//scrollTop 文档滚动距离
// offsetX offsetY 元素相对于文档的偏移量
//clientX clientY 鼠标相对于窗口的左上角的位置
//pageX pageY相对于文档左上角的位置（包括滚动卷起来的部分）
var box = document.getElementById("box");
box.onmousedown = function(event) {
//获取鼠标再页面中的位置
var pageX = event.pageX;
var pageY = event.pageY;
console.log(pageX,pageY);
//获取鼠标按下时在盒子中的位置
var boxX = pageX - box.offsetLeft;
var boxY = pageY - box.offsetTop;
console.log(pageX,pageY);
console.log(box.offsetLeft,box.offsetTop);
console.log(boxX,boxY);
document.onmousemove = function (event) {
var event = event
//获取鼠标在页面上的位置
var pageX = event.pageX;
var pageY = event.pageY;
//box跟着鼠标移动
box.style.left = pageX - boxX + "px";
box.style.top = pageY - boxY + "px"
}
}
box.onmouseup = function (event) {
document.onmousemove = null
}
</script>
</body>
</html>
