div在瀏覽器可見區域隨意拖拽
阿新 • • 發佈：2019-01-10
實現div的隨意拖拽，需要注意的就是不能拖著拖著div在瀏覽器裡面消失了，因此需要進行位置計算（用到的資料）
1、獲取瀏覽器可見區域寬高
browserWidth = document.documentElement.clientWidth browserHeight = document.documentElement.clientHeight2、獲取div寬高
boxWidth = document.getElementById('box').offsetWidthboxHeight = document.getElementById('box').offsetHeight
3、滑鼠相對於div左側、頂部位置
disX = e.clientX - this.offsetLeft; disY = e.clientY - this.offsetTop;不說了，直接上完整程式碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{ margin: 0; padding: 0; } #box{ position: absolute; width: 200px; height: 200px; background: red;} </style> </head> <body> <div id="box"></div> <script> function move(){ // 獲取元素和初始值 var oBox = document.getElementById('box'),disX = 0, disY = 0; // 獲取瀏覽器可見區域寬高，div寬高 var browserWidth = document.documentElement.clientWidth, browserHeight = document.documentElement.clientHeight, boxWidth = document.getElementById('box').offsetWidth, boxHeight = document.getElementById('box').offsetHeight; // 容器滑鼠按下事件 oBox.onmousedown = function (e){ var e = e || window.event; // 滑鼠相對於div左側位置 disX = e.clientX - this.offsetLeft; disY = e.clientY - this.offsetTop; document.onmousemove = function (e){ var e = e || window.event; oBox.style.left = (e.clientX - disX) + 'px'; if((e.clientX - disX)<=0){ oBox.style.left = 0; }else if((boxWidth - disX + e.clientX) >= browserWidth){ oBox.style.left = browserWidth - boxWidth + "px"; } oBox.style.top = (e.clientY - disY) + 'px'; if((e.clientY - disY) <= 0){ oBox.style.top = 0; }else if((boxHeight - disY + e.clientY) >= browserHeight){ oBox.style.top = browserHeight - boxHeight + "px"; } }; document.onmouseup = function (){ document.onmousemove = null; document.onmouseup = null; }; return false; }; } move(); </script> </body> </html><meta charset="UTF-8"> <title>拖拽</title> <style> *{ margin: 0; padding: 0; } #box{ position: absolute; width: 200px; height: 200px; background: red;} </style> </head> <body> <div id="box"></div> <script> function move(){ // 獲取元素和初始值 var oBox = document.getElementById('box'),disX = 0, disY = 0; // 獲取瀏覽器可見區域寬高，div寬高 var browserWidth = document.documentElement.clientWidth, browserHeight = document.documentElement.clientHeight, boxWidth = document.getElementById('box').offsetHeight, boxHeight = document.getElementById('box').offsetWidth; // 容器滑鼠按下事件 oBox.onmousedown = function (e){ var e = e || window.event; // 滑鼠相對於div左側位置 disX = e.clientX - this.offsetLeft; disY = e.clientY - this.offsetTop; document.onmousemove = function (e){ var e = e || window.event; oBox.style.left = (e.clientX - disX) + 'px'; if((e.clientX - disX)<=0){ oBox.style.left = 0; }else if((boxWidth - disX + e.clientX) >= browserWidth){ oBox.style.left = browserWidth - boxWidth + "px"; } oBox.style.top = (e.clientY - disY) + 'px'; if((e.clientY - disY) <= 0){ oBox.style.top = 0; }else if((boxHeight - disY + e.clientY) >= browserHeight){ oBox.style.top = browserHeight - boxHeight + "px"; } }; document.onmouseup = function (){ document.onmousemove = null; document.onmouseup = null; }; return false; }; } move(); </script> </body> </html>