vue3+ts 指令拖拽案例

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

<script setup lang="ts">
import { ref, Directive, DirectiveBinding } from "vue";
const vMove: Directive<any, void> = (el: HTMLElement, bingding: DirectiveBinding) => {
  let moveElement: HTMLDivElement = el.firstElementChild as HTMLDivElement;
  console.log(moveElement);
  const mouseDown = (e: MouseEvent) => {
    let X = e.clientX - el.offsetLeft;
    let Y = e.clientY - el.offsetTop;

    const move = (e: MouseEvent) => {
      console.log(e);
      el.style.left = e.clientX - X + "px";
      el.style.top = e.clientY - Y + "px";
    };
    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", () => {
      document.removeEventListener("mousemove", move);
    });
  };
  moveElement.addEventListener("mousedown", mouseDown);
};
</script>

<style lang="scss">
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 3px solid black;
  .header {
    height: 20px;
    background: black;
  }
}
</style>

效果图: