Vue3拖拽

<template>
  <div ref="drag" class="drag"></div>
</template>
 
<script lang="ts" setup>
import {ref,onMounted} from "vue"
const drag=ref(null)
const disX=ref<number>(0)
const disY=ref<number>(0)
const x=ref<number>(0)
const y=ref<number>(0)
onMounted(()=>{
    getdrag().onmousedown=Fndown
})
const getdrag=function(){
    return (drag.value as unknown as HTMLDivElement)
}
 
const Fndown  = function(ev:MouseEvent){
    
    disX.value = ev.clientX - x.value
    disY.value = ev.clientY - y.value
    document.onmousemove = fnmove
    document.onmouseup = fnup
}
const fnmove=function(ev:MouseEvent){
    x.value = ev.pageX-disX.value
    y.value = ev.pageY-disY.value
    getdrag().style.left = x.value+"px"
    getdrag().style.top = y.value+"px"
    
}
const fnup=function(ev:MouseEvent){
   document.onmousemove = null
    document.onmouseup = null
}
</script>
 
<style lang="less" scoped>
.drag{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: pink;
}
</style>