弹出框的拖拽效果实现

1、弹出框推拽的效果

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

2、实现原理

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

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

蓝色距离：通过offsetLeft获得；
黄色距离：通过e.pageX获得；
然后我们将e.pageX - node.offsetLeft 的差值赋值给盒子距离页面的水平距离即可；
在鼠标移动过程中，蓝色距离是不会发生变化的，而黄色距离是会随着鼠标移动而发生变化的，所以盒子相对于页面的距离也是变化的，就可以实现盒子跟随鼠标移动啦！

3、具体代码

代码思路：
给盒子绑定事件：点击盒子（鼠标按下时，就获取鼠标在盒子里的坐标）

box.addEventListener('mousedown',function(e){
    
    
  var x = e.pageX - box.offsetLeft;
  var y = e.pageY - box.offsetTop;
  // 接下来时鼠标移动事件，鼠标移动事件只有在鼠标按下了才发生，所以一定是写在按下的这个事件里
    document.addEventListener('mousemove', function(e){
    
    
    box.style.left = e.pageX - x + 'px' ;  //千万别忘记加px
    box.style.top  = e.pageY - y + 'px' ;
    })
})

注意事项;
获取的值都是不带单位的，最后将值赋给盒子的样式的时候，别忘了单位；
鼠标只有在按下才开始移动，所以移动事件在按下事件里面；