<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>
