思路：
- 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>
