vue3实现拖拽效果

<template>
  <!-- 画布上方工具栏 -->
  <div class="top" ref="dragRef" @mousedown="startDrag">
    <!-- 其他内容保持不变 -->
  </div>
</template>

<script setup lang="ts">
// ... 其他已有的 imports ...
import { ref } from 'vue'

// ... 其他已有的代码 ...

// 拖拽相关
const dragRef = ref<HTMLElement | null>(null)
let isDragging = false
let currentX: number
let currentY: number
let initialX: number
let initialY: number

const startDrag = (e: MouseEvent) => {
  // 如果点击的是按钮或其子元素，不启动拖拽
  if ((e.target as HTMLElement).closest('button') || 
      (e.target as HTMLElement).closest('.a-trigger') ||
      (e.target as HTMLElement).closest('.a-tooltip')) {
    return
  }

  if (!dragRef.value) return
  
  isDragging = true
  initialX = e.clientX - dragRef.value.offsetLeft
  initialY = e.clientY - dragRef.value.offsetTop
  
  document.addEventListener('mousemove', drag)
  document.addEventListener('mouseup', stopDrag)
}

const drag = (e: MouseEvent) => {
  if (!isDragging || !dragRef.value) return
  
  e.preventDefault()
  currentX = e.clientX - initialX
  currentY = e.clientY - initialY
  
  dragRef.value.style.left = `${currentX}px`
  dragRef.value.style.top = `${currentY}px`
}

const stopDrag = () => {
  isDragging = false
  document.removeEventListener('mousemove', drag)
  document.removeEventListener('mouseup', stopDrag)
}
</script>

<style scoped>
.top {
  position: fixed; /* 改为 fixed */
  height: 30px;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  z-index: 999; /* 提高 z-index */
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 0 10px;
  cursor: move; /* 添加移动光标 */
  user-select: none; /* 防止拖动时选中文本 */
}

/* ... 其他样式保持不变 ... */
</style>