可拖动的窗口盒子

前言

顾名思义，支持窗口头部可拖动，点击关闭按钮可以清除盒子（注意，是清除掉）。

原理

思路很重要，我就简单说下实现思路
按事件驱动的角度去分析
①准备：父盒子要设置绝对定位和宽度
②当拖动盒子头部（会触发事件），那可以直接将这个头部节点的父盒子拿到。

const div1 = event.currentTarget.parentElement

③分析点到盒子左边和上边的距离，这里只分析前者，举一反三都是一样的，不赘述了
获取到拖动时的第一个鼠标点水平坐标，和盒子的偏移量（就是盒子的最左侧离浏览器左边’边边的距离），相减，就会得到这个点到盒子左边'边边上的距离

const distanceX = event.clientX - movableBox.offsetLeft

④执行拖动的操作时，获取到滑动时的水平坐标，减去③获取到的那段距离，就是这个盒子最终的left值

document.onmousemove = function (e) {
    movableBox.style.left = e.clientX - distanceX + 'px'
    movableBox.style.top = e.clientY - distanceY + 'px'
}

所有的代码

html部分

<template>
  <div class="clsMovableBox" v-if="isShow">
    <header @mousedown="mousedown">
      <span class="titleWord">NiuKingKing</span>
      <div class="closeBox" @click="close" id="closeButton">
        <i class="el-icon-close"></i>
      </div>
    </header>
    <div class="bodyPart"></div>
  </div>
</template>

css部分

.clsMovableBox {
  width: 500px;
  position: absolute;
  top: 0;
  left: 0;
}
header {
  height: 40px;
  line-height: 40px;
  background: rgb(248, 166, 183);
  .titleWord{
    float:left;
    padding-left:10px;
  }
}
.closeBox {
  float: right;
  width: 40px;
  text-align: center;
  cursor: pointer;
  &:hover {
    background: red;
  }
}
.bodyPart {
  height: 360px;
  background: rgb(255, 225, 127);
}

js部分

    close () {
      this.isShow = false
    },
    mousedown (event) {
      const movableBox = event.currentTarget.parentElement
      const closeDiv = document.getElementById('closeButton')
      closeDiv.onmousemove = (e) => {
        document.onmousemove = null
        document.onmouseup = null
        document.mousedown = null
        movableBox.style.cursor = 'default'
      }
      movableBox.style.cursor = 'move'
      const distanceX = event.clientX - movableBox.offsetLeft
      const distanceY = event.clientY - movableBox.offsetTop
      document.onmousemove = function (e) {
        movableBox.style.left = e.clientX - distanceX + 'px'
        movableBox.style.top = e.clientY - distanceY + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
        document.mousedown = null
        movableBox.style.cursor = 'default'
      }
    }
  }