在web開發中，鼠標拖拽效果非常常見，例如百度的登錄頁，點擊登錄會彈出一個窗口，并且這個窗口可以拖動；那么這樣的拖拽效果如何實現呢 ？其實實現很簡章，搞清楚他的原理就很容易了；首當其沖的，要涉及到鼠標的三個事件，分別為鼠標按下、移動、松開；在這三個事件里分別計算元素鼠標的位置即可；
復制代碼
/******* 拖拽原理1： 拖拽狀態 = 0 鼠標在元素上按下的時候 { 拖拽狀態 = 1 記錄下鼠標的x和y坐標 記錄下元素的x和y坐標 } 鼠標在元素上移動的時候 { 如果拖拽狀態是0就什么也不做。 如果拖拽狀態是1， 那么 元素y = 現在鼠標y - 原來鼠標y + 原來元素y 元素x = 現在鼠標x - 原來鼠標x + 原來元素x } 鼠標在任何時候放開的時候 { 拖拽狀態 = 0 } 將以上思路翻譯成JS代碼就可以實現拖拽的效果了。*******/上面這個原理也可以演變為：/******* 拖拽原理2： 拖拽狀態 = 0 鼠標在元素上按下的時候 { 拖拽狀態 = 1 記錄下鼠標的x和y坐標 記錄下元素的x和y坐標 元素的偏移值X=元素的X-元素的offsetLeft 元素的偏移值Y=元素的Y-元素的offsetTop } 鼠標在元素上移動的時候 { 如果拖拽狀態是0就什么也不做。 如果拖拽狀態是1， 那么 元素y = 現在鼠標y -元素的偏移值X 元素x = 現在鼠標x -元素的偏移值Y } 鼠標在任何時候放開的時候 { 拖拽狀態 = 0 } 將以上思路翻譯成JS代碼就可以實現拖拽的效果了。*******/上面兩種思路其實是異曲同工，需要注意的是在移動事件里，還要處理元素邊緣的位置，以防止元素被拖動的時候拖到瀏覽器以外的地方；直接來看代碼：
代碼一：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JS拖拽</title> <style> *{padding: 0; margin: 0; } .box{width: 100px;height: 100px;background: blue;position: absolute; } </style> <script> var isDown = false; var ObjLeft, ObjTop, posX, posY, obj; window.onload = function() { obj = document.getElementById('box'); obj.onmousedown = down; document.onmousemove = move; document.onmouseup = up; } function down(event) { obj.style.cursor = "move"; isDown = true; ObjLeft = obj.offsetLeft; ObjTop = obj.offsetTop; posX = parseInt(mousePosition(event).x); posY = parseInt(mousePosition(event).y); } function move(event) { if (isDown == true) { var x = parseInt(mousePosition(event).x - posX + ObjLeft); var y = parseInt(mousePosition(event).y - posY + ObjTop); var w = document.documentElement.clientWidth - obj.offsetWidth; var h = document.documentElement.clientHeight - obj.offsetHeight; console.log(x + ',' + y); if (x < 0) { x = 0 } else if (x > w) { x = w }; if (y < 0) { y = 0 }else if (y > h) { y= h }; obj.style.left = x + 'px'; obj.style.top = y + 'px'; } } function up() { isDown = false; } function mousePosition(evt) { var xPos, yPos; evt = evt || window.event; if (evt.pageX) { xPos = evt.pageX; yPos = evt.pageY; } else { xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft; yPos = evt.clientY + document.body.scrollTop - document.body.clientTop; } return { x: xPos, y: yPos } } </script></head><body> <div id="box" class="box"></div></body></html>代碼二：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JS拖拽</title> <style> *{padding: 0; margin: 0; } .box{width: 100px;height: 100px;background: blue;position: absolute; } </style> <script> var isDown = false; var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY; window.onload = function() { obj = document.getElementById('box'); obj.onmousedown = down; document.onmousemove = move; document.onmouseup = up; } function down(event) { obj.style.cursor = "move"; isDown = true; ObjLeft = obj.offsetLeft; ObjTop = obj.offsetTop; posX = parseInt(mousePosition(event).x); posY = parseInt(mousePosition(event).y); offsetX=posX-ObjLeft; offsetY=posY-ObjTop; } function move(event) { if (isDown == true) { var x=mousePosition(event).x-offsetX var y=mousePosition(event).y-offsetY var w = document.documentElement.clientWidth - obj.offsetWidth; var h = document.documentElement.clientHeight - obj.offsetHeight; console.log(x + ',' + y); x=Math.min(w,Math.max(0,x)); y=Math.min(h,Math.max(0,y)); obj.style.left = x + 'px'; obj.style.top = y + 'px'; } } function up() { isDown = false; } function mousePosition(evt) { var xPos, yPos; evt = evt || window.event; if (evt.pageX) { xPos = evt.pageX; yPos = evt.pageY; } else { xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft; yPos = evt.clientY + document.body.scrollTop - document.body.clientTop; } return { x: xPos, y: yPos } } </script></head><body> <div id="box" class="box"></div></body></html>代碼一對應原理一，代碼二對應原理二，效果都是一樣的，只不過原理二是在原理一的基礎上演變過來的，演變之后，元素拖動的邊緣處理也相應的做了變化。
以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
