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

<script setup>
import { ref } from 'vue';
// 用于存儲(chǔ)元素X和Y位置的響應(yīng)性引用
const x = ref(500);
const y = ref(500);
// 是否正在拖動(dòng)的標(biāo)志
const isDragging = ref(false);
// 開始拖動(dòng)的函數(shù)
const startDrag = (event) => {
  // 記錄初始鼠標(biāo)位置
  const initialMouseX = event.clientX;
  const initialMouseY = event.clientY;
  // 記錄初始元素位置
  const initialX = x.value;
  const initialY = y.value;
  // 開始拖動(dòng)，設(shè)置為true
  isDragging.value = true;
  // 當(dāng)鼠標(biāo)移動(dòng)時(shí)執(zhí)行的函數(shù)
  const dragging = (moveEvent) => {
    // 只有在拖動(dòng)時(shí)才執(zhí)行
    if (isDragging.value) {
      // 計(jì)算鼠標(biāo)移動(dòng)的距離
      const deltaX = moveEvent.clientX - initialMouseX;
      const deltaY = moveEvent.clientY - initialMouseY;
      // 更新元素的位置
      x.value = initialX + deltaX;
      y.value = initialY + deltaY;
    }
  };
  // 鼠標(biāo)釋放時(shí)停止拖動(dòng)的函數(shù)
  const stopDrag = () => {
    // 結(jié)束拖動(dòng)，設(shè)置為false
    isDragging.value = false;
    // 移除事件監(jiān)聽器
    document.removeEventListener('mousemove', dragging);
    document.removeEventListener('mouseup', stopDrag);
  };
  // 添加鼠標(biāo)移動(dòng)和釋放時(shí)的事件監(jiān)聽器
  document.addEventListener('mousemove', dragging);
  document.addEventListener('mouseup', stopDrag);
};
</script>

<style>
.draggable {
  width: 550px;
  height: 550px;
  border: 1px solid #000;
  position: fixed;
  cursor: grab; /* 設(shè)置鼠標(biāo)樣式為可抓取狀態(tài) */
  z-index: 100;
}
</style>