js仿百度登录页实现拖动窗口效果

时间：2021-05-26

在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>

代码一对应原理一，代码二对应原理二，效果都是一样的，只不过原理二是在原理一的基础上演变过来的，演变之后，元素拖动的边缘处理也相应的做了变化。

以上就是本文的全部内容，希望对大家的学习有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章