高級拖拽 · JavaScript學習記錄

### 高級拖拽 - 復習拖拽原理 - 距離不變 - 三個事件 - 限制范圍 - 對位置進行判斷 - 例子1：不能拖出窗口的 Div - 例子2：不能拖出指定窗口的 Div - 磁性吸附 - 圖片拖拽 - 阻止默認事件 - **文字選中** - 阻止默認事件 `return false` 可以解決 `chrome` 、`FireFox` 、`IE9`的文字選中問題 - IE 下拖動有問題： - 事件捕獲：`.setCapture()` 只兼容IE - 取消捕獲：`.releaseCapture()` - 與 DOM 配合 - 帶框的拖拽 - 保留原有位置的拖拽 - 代碼： ```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: 100px; height: 100px; position: absolute; background-color: rgb(82, 177, 255); } .box { border: black dashed 1px; position: absolute; } </style> <script> // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } window.onload = function () { var oDiv = get('div1'); var oDiv0 = get('div0'); // oDiv.onmousedown 很容易移出范圍 oDiv.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); // 增加邊框 var oBox = document.createElement('div'); oBox.className = 'box'; // 邊框的大小 - 線寬 = oDiv 的大小 oBox.style.width = this.offsetWidth - 2 + 'px'; oBox.style.height = this.offsetHeight - 2 + 'px'; oDiv0.appendChild(oBox); // 邊框的位置 = oDiv 的位置 oBox.style.left = oDiv.offsetLeft + 'px'; oBox.style.top = oDiv.offsetTop + 'px'; // IE7 兼容 if (this.setCapture) { this.onmousemove = mouseMove; this.onmouseup = mouseUp; oDiv.setCapture(); } else { document.onmousemove = mouseMove; document.onmouseup = mouseUp; } function mouseUp() { this.onmousemove = ''; this.onmouseup = ''; // 鼠標松開，oDiv 到 oBox 的位置 oDiv.style.left = oBox.offsetLeft + 'px'; oDiv.style.top = oBox.offsetTop + 'px'; // 刪除生成的box oDiv0.removeChild(oBox); // IE7 兼容 if (this.releaseCapture) { this.releaseCapture(); } } function mouseMove(ev) { // 不斷獲取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; // 鼠標移動時移動虛線框 oBox.style.left = left + 'px'; oBox.style.top = top + 'px'; } // 阻止火狐重影bug, 解決 chrome FireFox IE9的文字選中問題 return false; } } </script> </head> <body> <div id="div0"> asdfasdfas/sad'234 <div id="div1">asdfasdfas/sad</div> asdfasdfas/sad'234 </div> </body> </html> ```