在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"></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"></div> </body> </html>
代码一对应原理一，代码二对应原理二，效果都是一样的，只不过原理二是在原理一的基础上演变过来的，演变之后，元素拖动的边缘处理也相应的做了变化。
以上就是本文的全部内容，希望对大家的学习有所帮助。