这里写自定义目录标题
弹出框的拖拽效果实现
1、弹出框推拽的效果
我们在上网的时候,经常会遇到各种弹出框,我们可以通过鼠标移动这些弹出框,从而不影响我们的预览体验。
具体来说,就是当鼠标按下并且开始移动弹出框,之后松开鼠标,弹出框就停止移动。这种效果主要使用到JS里用来获取盒子的位置、大小的offsetTop 和 offsetLeft系列。
2、实现原理
首先需要了解的是一些鼠标事件:
mousedown: 鼠标按下
mousemove: 鼠标移动
mouseup: 鼠标松开
以及 一些获取坐标的方法:
e.pageX(e.pageY): 这个是获取鼠标在整个页面中的坐标(!!这里的页面是我们的浏览窗口这个可视区,意思就是加入页面被我们缩小了,那么这个坐标也会变化)
node.offsetLeft(node.offsetTop) : 这个是得到这个node元素节点相对于加了定位的父级元素(如果没有加定位,就是相对于body元素的)
在拖拽过程中,鼠标移动过程中,将获得的最新的值赋值给弹出框的left和top值,这样弹出框就可以跟着鼠标走了;具体如下图: