<style>
 *{
 margin:0;
 padding:0;
 }
 #box{
 width: 200px;
 height: 200px;
 background: url("./img/aio.png") no-repeat;
 background-size: cover;
 position: absolute;/*定位元素 父級元素window就是初始包含塊*/
 top:0;
 left:0;
 }
</style>

<div id="box"></div>

<script>
 //獲取標簽
 var box=document.getElementById("box");
 var body=document.body;
 var x,y;//全局作用域
 //鼠標按下事件 0級
 box.onmousedown=function(e) {//傳入形參e
 var mx=e.clientX;//鼠標距離瀏覽器左
 var my=e.clientY;//鼠標距離瀏覽器上
 var bx=box.offsetLeft;//盒子距離瀏覽器左
 var by=box.offsetTop;//盒子距離瀏覽器上
 x=mx-bx;//實際盒子距離的瀏覽器左
 y=my-by;//實際盒子距離的瀏覽器上
 //鼠標移動事件 0級
 body.onmousemove=function(e) {//拿到全局x、y、
  //獲取當前鼠標移動到的坐標點
  var mx=e.clientX;
  var my=e.clientY;
  //盒子距離瀏覽器
  box.style.left=mx-x +"px";
  box.style.top=my-y +"px";

 };
 //鼠標彈起事件(松開)
 box.onmouseup=function(e) {
  body.onmousemove=null;//不做任何操作//dom0級事件解除事件綁定
  //獲取當前鼠標移動到的坐標點
  var mx=e.clientX;
  var my=e.clientY;
  //盒子距離瀏覽器
  box.style.left=mx-x +"px";
  box.style.top=my-y +"px";
 }
 };
</script>