拖拽 · JavaScript學習記錄

### 拖拽 - 簡單拖拽 - 拖拽原理 - 鼠標按下位置到 div 距離不變 - 三個事件：` onmousedown` `onmousemove` `onmouseup` - 靠譜拖拽 - 原有拖拽的問題：移動太快鼠標會移出 div - 直接給 `document` 加事件 - FireFox 下，空 Div 拖拽 Bug - 阻止默認事件：`onmousedown {return false}` - 防止拖出頁面 - 修正位置：在可視區內 - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>拖拽</title> <link rel="stylesheet" href="../reset.css"> <style> #div1 { width: 200px; height: 200px; position: absolute; background-color: rgb(255, 0, 0); } </style> <script> // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } window.onload = function () { var oDiv = get('div1'); // oDiv.onmousedown 很容易移出范圍 document.onmousedown = function Drag() { var ev = event||ev; var _this = this; // 鼠標可視區位置 - div左邊距 = 鼠標在div內的位置 var disX = ev.clientX - oDiv.offsetLeft; var disY = ev.clientY - oDiv.offsetTop; console.log(disX,'可視區鼠標X：', ev.clientX, '鼠標Y：',ev.clientY); this.onmousemove = function mouseMove() { // 不斷獲取Event 對象，坐標才會不斷更新 var ev = event||ev; // console.log('可視區鼠標X：', ev.clientX, '鼠標Y：',ev.clientY); // div位置 = 鼠標可視區新的位置 - 鼠標與div的距離 var left = ev.clientX -disX; var top = ev.clientY - disY; if (left < 0) { left = 0; } if (top < 0) { top = 0 } if (left > document.documentElement.clientWidth - oDiv.offsetWidth) { left = document.documentElement.clientWidth - oDiv.offsetWidth + 'px'; } if (top > document.documentElement.clientHeight - oDiv.offsetHeight) { top = document.documentElement.clientHeight - oDiv.offsetHeight + 'px'; } oDiv.style.left = left + 'px'; oDiv.style.top = top + 'px'; } this.onmouseup = function mouseUp() { _this.onmousemove = ''; this.onmouseup = ''; } // 阻止火狐重影bug return false; } } </script> </head> <body> <div id="div1"></div> </body> </html> ```