js实现可拖拽弹框

包含功能：

• 仅在视图内可拖拽
• 点击蒙层可关闭

先看两张效果图：

image.png image.png image.png

html:

  <div id="content">
    <button class="login_btn" onclick="loginLink();">
      登 录
    </button>
    <div class="bg">
      <div class="login">
        <div class="login_header"><span onclick="closebtn();">X</span></div>
        此弹层可以拖拽
      </div>
    </div>
  </div>

css:

    .login_btn {
      width: 100px;
      height: 40px;
      background: #48D1CC;
      text-align: center;
      line-height: 40px;
      border-radius: 5px;
      cursor: pointer;
      border: 0
    }

    .bg {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .3);
      display: none;
    }

    .login {
      width: 512px;
      height: 340px;
      background: #F0FFFF;
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 99;
      border: 1px solid red;
      transform: translate(-50%, -50%);
    }

    .login_header {
      width: 100%;
      height: 40px;
      background: #00BFF3;
      line-height: 40px;
    }

    .login_header span {
      float: right;
      display: block;
      margin-top: 5px;
      margin-right: 10px;
      cursor: pointer;
      font-family: 'arial';
    }

js:

    var bg = document.querySelector('.bg');
    function loginLink() {
      (bg.style.display = 'block')
      setTimeout(() => {
        addEvent()
      }, 100);
    }
    function closebtn() {
      bg.style.display = 'none';
      document.removeEventListener('click', domClick)
    }
    var loginDiv = document.querySelector('.login');

    function addEvent() {
      document.addEventListener('click', domClick)
    }

    function domClick(e) {
      if (!loginDiv.contains(e.target)) {
        closebtn()
      }
    }

    loginDiv.addEventListener('mousedown', function (e) {
      const { top, left } = loginDiv.getBoundingClientRect()
      const topDis = loginDiv.offsetTop - top
      const leftDis = loginDiv.offsetLeft - left

      // 鼠标点击位置和盒子边缘x,y方向距离（在点击后移动盒子过程中这个距离是不会改变的）
      var relativeY = e.pageY - loginDiv.offsetTop;
      var relativeX = e.pageX - loginDiv.offsetLeft;

      function move(e) {
        const xd = e.pageX - relativeX
        const yd = e.pageY - relativeY
        let top, left
        if (xd < leftDis) {
          left = leftDis + 'px'
        } else if (xd > window.innerWidth - leftDis) {
          left = window.innerWidth - leftDis + 'px'
        } else {
          left = xd + 'px';
        }

        if (yd < topDis) {
          top = topDis + 'px'
        } else if (yd > window.innerHeight - topDis) {
          top = window.innerHeight - topDis + 'px'
        } else {
          top = yd + 'px';
        }
        loginDiv.style.left = left
        loginDiv.style.top = top
      }
      document.addEventListener('mousemove', move);
      document.addEventListener('mouseup', function () {
        document.removeEventListener('mousemove', move)
      });
    })