Vue3中实现div拖拽功能

<template>
  <div class="draggable" :style="{ left: `${x}px`, top: `${y}px` }" @mousedown="startDrag">
    拖拽我
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 用于存储元素X和Y位置的响应性引用
const x = ref(500);
const y = ref(500);
// 是否正在拖动的标志
const isDragging = ref(false);
// 开始拖动的函数
const startDrag = (event) => {
  // 记录初始鼠标位置
  const initialMouseX = event.clientX;
  const initialMouseY = event.clientY;
  // 记录初始元素位置
  const initialX = x.value;
  const initialY = y.value;
  // 开始拖动，设置为true
  isDragging.value = true;
  // 当鼠标移动时执行的函数
  const dragging = (moveEvent) => {
    // 只有在拖动时才执行
    if (isDragging.value) {
      // 计算鼠标移动的距离
      const deltaX = moveEvent.clientX - initialMouseX;
      const deltaY = moveEvent.clientY - initialMouseY;
      // 更新元素的位置
      x.value = initialX + deltaX;
      y.value = initialY + deltaY;
    }
  };
  // 鼠标释放时停止拖动的函数
  const stopDrag = () => {
    // 结束拖动，设置为false
    isDragging.value = false;
    // 移除事件监听器
    document.removeEventListener('mousemove', dragging);
    document.removeEventListener('mouseup', stopDrag);
  };
  // 添加鼠标移动和释放时的事件监听器
  document.addEventListener('mousemove', dragging);
  document.addEventListener('mouseup', stopDrag);
};
</script>

<style>
.draggable {
  width: 550px;
  height: 550px;
  border: 1px solid #000;
  position: fixed;
  cursor: grab; /* 设置鼠标样式为可抓取状态 */
  z-index: 100;
}
</style>