如何实现弹出框的推拽效果？

弹出框的拖拽效果实现

1、弹出框推拽的效果

我们在上网的时候，经常会遇到各种弹出框，我们可以通过鼠标移动这些弹出框，从而不影响我们的预览体验。
具体来说，就是当鼠标按下并且开始移动弹出框，之后松开鼠标，弹出框就停止移动。这种效果主要使用到JS里用来获取盒子的位置、大小的offsetTop 和 offsetLeft系列。

2、实现原理

首先需要了解的是一些鼠标事件：
mousedown: 鼠标按下
mousemove: 鼠标移动
mouseup: 鼠标松开
以及 一些获取坐标的方法：
e.pageX(e.pageY): 这个是获取鼠标在整个页面中的坐标（！！这里的页面是我们的浏览窗口这个可视区，意思就是加入页面被我们缩小了，那么这个坐标也会变化）
node.offsetLeft(node.offsetTop) : 这个是得到这个node元素节点相对于加了定位的父级元素（如果没有加定位，就是相对于body元素的）

在拖拽过程中，鼠标移动过程中，将获得的最新的值赋值给弹出框的left和top值，这样弹出框就可以跟着鼠标走了；具体如下图：