盒子在浏览器中被鼠标点击点击可以拖动，鼠标松开保持在拖动的位置

HTML代码

<body>
    <a href="#" class="login">请登录</a>
    <div class="mask">
        <div class="login_body">
            <i class="iconfont icon-close"></i>
            <button class="logging">登录</button>
        </div>
    </div>
    <script src="./js/index.js">

    </script>
</body>

css代码

i {
  font-style: normal;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.192);
  display: none;
}
.mask .login_body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: pink;
}
.mask .icon-close {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 30px;
}
.mask .logging {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%);
  width: 150px;
  height: 50px;
}
/*# sourceMappingURL=./index.css.map */

js代码

let login = document.querySelector(".login")
let mask = document.querySelector(".mask")
let login_body = document.querySelector(".login_body")
let logging = document.querySelector(".logging")
let close = document.querySelector(".icon-close")
// 点击登录弹出遮罩层
login.addEventListener("click", function () {
    mask.style.display = "block"
})
// 点击登录框X关闭遮罩层
close.addEventListener("click", function () {
    mask.style.display = "none"
})
//鼠标点击获取鼠标在当前盒子的位置
login_body.addEventListener("mousedown", function (e) {

    let x = e.pageX - this.offsetLeft;
    let y = e.pageY - this.offsetTop;
    // console.log(e.pageX)
    // console.log(e.pageY)
    // console.log(this.offsetLeft)
    // console.log(this.offsetTop)
    //鼠标移动盒子位置
    login_body.addEventListener("mousemove", move)
    //封装移动方法
    function move(e) {
        login_body.style.left = e.pageX - x + "px"
        login_body.style.top = e.pageY - y + "px"
        // console.log(login_body.offsetLeft + x);
        // console.log(login_body.offsetTop + y);
    }
    //鼠标弹开移除鼠标移动监听事件
    login_body.addEventListener("mouseup", function () {
        login_body.removeEventListener("mousemove", move)
    })
})

js处理过程中需要注意的点

我们需要获取盒子到浏览器的距离：它是一个变量

鼠标到浏览器的距离它是一个常量

鼠标到盒子的距离它是一个常量

当你移动时是盒子到浏览器的距离改变，鼠标到盒子的距离不变。我们应该求出盒子的距离：

首先我们应该求出鼠标到盒子左侧距离:e.pageX-this.offsetLeft 也就是鼠标到浏览器左侧距离-盒子到浏览器左侧距离。

    let x = e.pageX - this.offsetLeft;
    let y = e.pageY - this.offsetTop;

剩下的就是盒子左侧到浏览器左侧距离它是一个变量。移动时鼠标的位置是不断变化的，盒子到左侧的距离就是当前鼠标到浏览器左侧距离-鼠标到盒子距离。

     login_body.style.left = e.pageX - x + "px"
     login_body.style.top = e.pageY - y + "px"

监听事件利用了三个

xxx.addEventListener('mousedown',function(){}) 鼠标按下执行监听事件

xxx.addEventListener('mousemove',function(){}) 鼠标移动执行监听事件

xxx.addEventListener('mouseup',function(){}) 鼠标弹起执行监听事件

offset与e.page

xxx.offsetleft 本元素左边框到带有定位的父盒子左边框的距离

xxx.offsetTop 本元素顶部边框到带有定位的父盒子顶部的距离

e.pageX 鼠标到页面左侧的坐标

e.pageY 鼠标到页面顶部的坐标

我做时的疑惑点-------注意:

一、形参和实参知识点，调用函数

错误写法

改后成功

错误原因我认为是实参为空，没有传值给形参，e为当前盒子中对象方法，然后e.pageX获取不了数据，打印出e为undefined，undefined代表定义了未赋值。所以会报错：

Uncaught TypeError: Cannot read property 'pageX' of undefined

点击登录后可以弹出遮罩层，遮罩成中的登录框可以拖动的实现原理