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>

效果图: