实现一个简单的拖拽自定义指令

<template><!-- box 样式 需要给个position的定位，要么移动不起来 --><div v-move class="box"><div class="header"></div><div>内容</div></div>
</template><script setup lang="ts">
import { Directive, DirectiveBinding } from 'vue'const vMove:Directive<any,void> = (el:HTMLElement,binding:DirectiveBinding) => {let moveElement:HTMLDivElement = el.firstElementChild as HTMLDivElementconsole.log('moveElement:',moveElement)const mouseDown = (e:MouseEvent) =>{let x = e.clientX - el.offsetLeftlet y = e.clientY - el.offsetTopconst move = (e:MouseEvent) =>{// 设置边界的最小值let curX = e.clientX - x < 0 ? 0 : e.clientX - xlet curY = e.clientY - y < 0 ? 0 : e.clientY - y// 设置边界的最大值 300 为div盒子的宽度 高度// curX curY 为 0 时 证明已经到边界最小值，就不需要在判断if(curX > 0){curX = e.clientX - x > window.innerWidth - 300 ? window.innerWidth - 300 : e.clientX - x}if(curY > 0){curY = e.clientY - y > window.innerHeight - 300 ? window.innerHeight - 300 : e.clientY - y}el.style.left = curX + 'px'el.style.top = curY + 'px'}// 监听 鼠标移动事件document.addEventListener('mousemove',move)document.addEventListener('mouseup',()=>{document.removeEventListener('mousemove',move)})}// 监听 鼠标按下事件moveElement.addEventListener('mousedown',mouseDown)
}</script><style lang="scss" scoped>
.header {background: #000;height: 50px;
}
.box {width:300px;height: 300px;background: yellow;position: absolute;
}
</style>