vue3+ts 写 拖拽

两种方式，思路都一样 就是写的方式不一样

<template>
  <div>
    <div class="box" ref="dragBox"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

const dragBox = ref<HTMLDivElement>()

const getBox = () => {
  return dragBox.value as HTMLDivElement
}
 //鼠标按下时
const fnDown = (ev: MouseEvent) => {
  const disX = ev.clientX - getBox().offsetLeft
  const disY = ev.clientY - getBox().offsetTop
  //鼠标移动时
  document.onmousemove = (ev: MouseEvent) => {
    const x = ev.clientX - disX
    const y = ev.clientY - disY

    getBox().style.left = x + 'px'
    getBox().style.top = y + 'px'
  }
   //鼠标抬起 清除移动和鼠标抬起事件
  document.onmouseup = () => {
    document.onmousemove = null
    document.onmouseup = null
  }
  
}
onMounted(() => {
  getBox().onmousedown = fnDown
})
</script>
<style lang="less" scoped>
.box {
  width: 150px;
  height: 150px;
  position: absolute;
  background-color: red;
}
</style>

第二种

<template>
  <div>
    <div class="box" ref="dragBox"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'

interface iPostions {
  disX: number
  disY: number
  x: number
  y: number
}
const dragBox = ref<HTMLDivElement>()

const getBox = () => {
  return dragBox.value as HTMLDivElement
}
const positions = reactive<iPostions>({
  disX: 0,
  disY: 0,
  x: 0,
  y: 0
})
//鼠标移动的封装
const fnMove = (ev: MouseEvent) => {
  positions.x = ev.clientX - positions.disX
  positions.y = ev.clientY - positions.disY

  getBox().style.left = positions.x + 'px'
  getBox().style.top = positions.y + 'px'
}
//鼠标抬起的封装
const fnUp = () => {
  document.onmousemove = null
  document.onmouseup = null
}
// 鼠标按下时
const fnDown = (ev: MouseEvent) => {
  positions.disX = ev.clientX - getBox().offsetLeft
  positions.disY = ev.clientY - getBox().offsetTop
    
  document.onmousemove = fnMove
  //
  document.onmouseup = fnUp
}

onMounted(() => {
  getBox().onmousedown = fnDown
})
</script>
<style lang="less" scoped>
.box {
  width: 150px;
  height: 150px;
  position: absolute;
  background-color: red;
}
</style>