滑鼠事件，拖動元素塊
阿新 • • 發佈：2018-12-22
<html> <head> <meta charset="utf-8" /> <title>滑鼠事件</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; top: 0; left: 0; position: absolute; background: orange; cursor: pointer; } </style> </head> <body> <div></div> </body> <script> // 獲取div物件 var oDiv = document.getElementsByTagName('div')[0] // 計算元素移動的最大偏移位置 var maxLeft = window.innerWidth - oDiv.offsetWidth var maxTop = window.innerHeight - oDiv.offsetHeight // 滑鼠按下事件 oDiv.onmousedown = function (e) { // 相容獲取事件 var ev = e || event // 獲取點選事件的位置 // console.log(ev.clientX + 'x' + ev.clientY) // 記錄滑鼠按下的點的位置 var posX = ev.clientX - oDiv.offsetLeft var posY = ev.clientY - oDiv.offsetTop // 滑鼠移動事件(不要做耗時操作) document.onmousemove = function (e) { var ev = e || event // 獲取滑鼠移動位置 // console.log(ev.clientX + 'x' + ev.clientY) // 計算滑鼠移動點的位置 var left = ev.clientX - posX var top = ev.clientY - posY // 邊界判斷 if (left < 0) { left = 0 } else if (left > maxLeft) { left = maxLeft } else if (top > maxTop) { top = maxTop } // 重新設定屬性 oDiv.style.left = left + 'px' oDiv.style.top = top + 'px' } // 滑鼠擡起事件 document.onmouseup = function () { document.onmousemove = null document.onmouseup = null } } </script> </html>