vue3+ts自定义指令v-move实现盒子自由拖动

1.注意这里我们是按住拖动header区域实现整个盒子的移动（大部分需求是这样的）
2.注意示例代码的HTML结构，我是将v-move绑定到整个盒子上，通过firstElementChild取到header
示例核心代码:

<template>
    <div v-move class="publicModalContainer">
        <div class="header">
            <div class="header-title">{{ title }}</div>
            <div class="header-delete" @click="toogltShow">X</div>
        </div>
        <div class="body">
            <slot name="content"></slot>
        </div>

    </div>
</template>

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

const vMove: Directive<any, void> = (el: HTMLElement) => {
    let moveElement = el.firstElementChild as HTMLElement
    function mouseDown(e: MouseEvent) {
        let X = e.clientX - el.offsetLeft
        let Y = e.clientY - el.offsetTop
        function mouseMove(e: MouseEvent) {
            el.style.left = e.clientX - X + 'px'
            el.style.top = e.clientY - Y + 'px'
        }
        document.addEventListener('mousemove', mouseMove)
        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', mouseMove)
        })
    }
    moveElement.addEventListener('mousedown', mouseDown)
}
</script>

CSS样式自己定义就行了
感谢您的阅读——