鼠標拖拽事件：
- 鼠標按下事件；
- 鼠標移動事件；
- 鼠標抬起事件。
- 移動前移動后鼠標在元素上的相對位置不發生改變，所以要記錄鼠標在元素上的位置。
在移動的時候需要記錄元素的偏移數
最后需要判斷邊界，當元素到達邊界時就不能再移動了
最后需要 把屬性重新設置一下，否則元素不能被拖拽。
<html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin:0; padding:0; } div{ width:100px; height:100px; background:red; position:absolute; /* 對元素進行定位*/ left:0; top:0; } </style> </head> <body> <div></div> </body> <script> var oDiv = document.getElementsByTagName('div')[0] var body = document.getElementsByTagName('body')[0] // 計算最大偏移距離（后期判斷邊界時要用到） oDiv.offsetWidth：表示div的寬度 var maxLeft = window.innerWidth - oDiv.offsetWidth var maxTop = window.innerHeight - oDiv.offsetHeight // 鼠標按下事件 oDiv.onmousedown = function (e) { var ev = e || event //記錄鼠標在元素上的位置 var posX = ev.clientX-oDiv.offsetLeft var posY = ev.clientY-oDiv.offsetTop //鼠標移動事件 body.onmousemove = function(e){ var ev = e || event //計算元素的偏移 var left = ev.clientX-posX var top = ev.clientY-posY //判斷邊界 if (left<0){ left=0 }else if (left>maxLeft){ left=maxLeft } if (top<0){ top=0 }else if(top>maxTop){ top=maxTop } //重新設置屬性 oDiv.style.left = left + "px" oDiv.style.top = top + "px" } //鼠標抬起事件 body.onmouseup = function(){ body.onmousemove = null body.onmouseup = null } } </script> </html>