vue3实现对自定义组件自由拖动效果

<template>
  <div class="left-admin" @mousedown="startDrag" :style="{ left: panelPosition.x + 'px', top: panelPosition.y + 'px' }">
  </div>
</template>
<style lang="less" scoped>
.left-admin {
  position: fixed;
  cursor: move;
}
</style>

const panelWidth = 443//初始宽度
const panelPosition = ref({//初始位置
  x: 8,
  y: 80
  // x: 0.5,
  // y: 0.5
})
let isDragging = false//是否拖拽中
let startX = 0//开始X坐标
let startY = 0//开始Y坐标
let initialX = 0//初始X坐标
let initialY = 0//初始Y坐标

// 鼠标按下事件
const startDrag = e => {
  isDragging = true
  startX = e.clientX//获取鼠标X坐标
  startY = e.clientY//获取鼠标Y坐标
  initialX = panelPosition.value.x//获取初始X坐标
  initialY = panelPosition.value.y//获取初始Y坐标
  document.addEventListener('mousemove', onDrag)//绑定鼠标移动事件  
  document.addEventListener('mouseup', stopDrag)//绑定鼠标释放事件
}

// 鼠标移动事件
const onDrag = e => {
  // 防止拖拽过程中鼠标点击导致的页面闪烁
  if (!isDragging) return
  //计算移动距离
  const dx = e.clientX - startX
  const dy = e.clientY - startY
  // 添加边界限制
  let newX = initialX + dx
  let newY = initialY + dy
  newX = Math.max(newX, 8)//最小值
  newX = Math.min(newX, window.innerWidth - panelWidth - 8)//最大值
  panelPosition.value = {//更新位置数据
    x: newX,
    y: newY
  }
}

// 鼠标释放事件
const stopDrag = () => {
  isDragging = false
  document.removeEventListener('mousemove', onDrag)// 鼠标移动事件
  document.removeEventListener('mouseup', stopDrag)// 鼠标释放事件
}

// 组件卸载时清理事件
onBeforeUnmount(() => {
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
})

<template>
  <div class="left-admin" @mousedown="startDrag" :style="{ left: panelPosition.x + 'px', top: panelPosition.y + 'px' }">
    <!-- <div class="top-title">
      <h1>各行政区检修工单统计（本月度）</h1>
    </div> -->
    <div class="admin-top">
      <h1>{{ adminTitle }}</h1>
      <img src="@/assets/images/page/close.svg" class="close-btn" @click="closeLeftAdmin" />
    </div>
    <div class="chart">
      <radarChart :indicatorData="indicatorData" :radarData="radarData" :chartColor="props.chartColor" />
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, onBeforeUnmount, getCurrentInstance } from 'vue'
import radarChart from '@/components/chart/radar-chart.vue'
import { getDevRepairCount } from '@/api/home/home-left.js'
const props = defineProps(['chartColor'])
const emit = defineEmits(['closeLeftAdmin'])
const context = getCurrentInstance()?.appContext.config.globalProperties
const dayjs = context?.$dayjs
const adminTitle = ref('各行政区检修工单统计（本月度）')
const indicatorData = ref([
  // { name: '张家港市' },
  // { name: '吴江区' },
  // { name: '吴中区' },
  // { name: '姑苏区' },
  // { name: '虎丘区' },
  // { name: '相城区' },
  // { name: '昆山市' },
  // { name: '太仓市' },
  // { name: '常熟市' }
])
const radarData = ref([
  // { value: [1200, 3000, 4000, 1000, 30000, 3000, 35000, 50000, 18000] }
  // { name: '已开工', value: [5200, 2000, 30000, 2000, 10000, 18000] },
  // { name: '未开工', value: [3200, 2000, 5000, 2000, 10000, 18000] },
  // { name: '已竣工', value: [2200, 2000, 5000, 2000, 10000, 18000] },
  // { name: '当值开竣工', value: [4200, 3000, 20000, 35000, 50000, 18000] },
  // { name: '改期和延期', value: [5000, 14000, 28000, 26000, 42000, 21000] }
])
const closeLeftAdmin = () => {
  emit('closeLeftAdmin')
}
// 新增状态
// const panelPosition = ref({ x: 8, y: 80 })
const panelWidth = 443
const panelPosition = ref({
  x: 8,
  y: 80
  // x: 0.5,
  // y: 0.5
})
let isDragging = false
let startX = 0
let startY = 0
let initialX = 0
let initialY = 0
// 鼠标按下事件
const startDrag = e => {
  isDragging = true
  startX = e.clientX
  startY = e.clientY
  initialX = panelPosition.value.x
  initialY = panelPosition.value.y
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
}
// 鼠标移动事件
const onDrag = e => {
  if (!isDragging) return
  const dx = e.clientX - startX
  const dy = e.clientY - startY
  let newX = initialX + dx
  let newY = initialY + dy
  newX = Math.max(newX, 8)
  newX = Math.min(newX, window.innerWidth - panelWidth - 8)
  panelPosition.value = {
    x: newX,
    y: newY
  }
}
// 鼠标释放事件
const stopDrag = () => {
  isDragging = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
}
// 组件卸载时清理事件
onBeforeUnmount(() => {
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
})
</script>
<style lang="less" scoped>
.left-admin {
  position: fixed;
  cursor: move;
}
</style>