<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);
// 開始拖動的函數(shù)
const startDrag = (event) => {
  // 記錄初始鼠標位置
  const initialMouseX = event.clientX;
  const initialMouseY = event.clientY;
  // 記錄初始元素位置
  const initialX = x.value;
  const initialY = y.value;
  // 開始拖動，設置為true
  isDragging.value = true;
  // 當鼠標移動時執(zhí)行的函數(shù)
  const dragging = (moveEvent) => {
    // 只有在拖動時才執(zhí)行
    if (isDragging.value) {
      // 計算鼠標移動的距離
      const deltaX = moveEvent.clientX - initialMouseX;
      const deltaY = moveEvent.clientY - initialMouseY;
      // 更新元素的位置
      x.value = initialX + deltaX;
      y.value = initialY + deltaY;
    }
  };
  // 鼠標釋放時停止拖動的函數(shù)
  const stopDrag = () => {
    // 結束拖動，設置為false
    isDragging.value = false;
    // 移除事件監(jiān)聽器
    document.removeEventListener('mousemove', dragging);
    document.removeEventListener('mouseup', stopDrag);
  };
  // 添加鼠標移動和釋放時的事件監(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; /* 設置鼠標樣式為可抓取狀態(tài) */
  z-index: 100;
}
</style>