Vue: 拖动HTMLElement

<template>
  <div v-move class="box">
    <div class="header">
    </div>
    <div>zax</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, DirectiveBinding, Directive } from 'vue'


const vMove: Directive<any, void> = (elem: HTMLElement, binding: DirectiveBinding) => {
  let divElement: HTMLDivElement = elem.firstElementChild as HTMLDivElement
  const mouseDown = (e: MouseEvent) => {
    let x = e.clientX - elem.offsetLeft
    let y = e.clientY - elem.offsetTop
    const move = (e: MouseEvent) => {
      console.log(e)
      elem.style.left = e.clientX - x + 'px'
      elem.style.top = e.clientY - y + 'px'
    }
    document.addEventListener('mousemove', move)
    document.addEventListener('mouseup', () => {
      document.removeEventListener('mousemove', move)
    })
  }
  divElement.addEventListener('mousedown', mouseDown)
}
</script>

<style lang="less">
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 3px double gray;

  .header {
    height: 20px;
    background-color: palegreen;

  }
}
</style>