vue3实现对自定义组件自由拖动效果
在数据可视化看板开发中，组件的自由拖拽功能能极大提升交互体验。本文将基于Vue3生态，从零开始解析如何实现一个支持自由拖拽的容器组件。
目录
一、核心实现原理
1.组件定位基础
2.拖曳过程实现
二、全部代码
一、核心实现原理
1.组件定位基础
使用position: fixed实现绝对定位，通过动态样式绑定left/top控制位置，@mousedown事件来触发拖曳效果。
<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>2.拖曳过程实现
（1）定义初始屏幕宽度、位置及判断条件
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坐标（2）鼠标按下事件
当鼠标进行拖动时，获取获取鼠标的X、Y坐标，并且绑定鼠标的移动和释放事件
// 鼠标按下事件
const startDrag = e => {isDragging = truestartX = 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)//绑定鼠标释放事件
}（3）鼠标移动事件
// 鼠标移动事件
const onDrag = e => {// 防止拖拽过程中鼠标点击导致的页面闪烁if (!isDragging) return//计算移动距离const dx = e.clientX - startXconst dy = e.clientY - startY// 添加边界限制let newX = initialX + dxlet newY = initialY + dynewX = Math.max(newX, 8)//最小值newX = Math.min(newX, window.innerWidth - panelWidth - 8)//最大值panelPosition.value = {//更新位置数据x: newX,y: newY}
}（4）鼠标释放事件
// 鼠标释放事件
const stopDrag = () => {isDragging = falsedocument.removeEventListener('mousemove', onDrag)// 鼠标移动事件document.removeEventListener('mouseup', stopDrag)// 鼠标释放事件
}（5）组件卸载时清理事件
// 组件卸载时清理事件
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 = truestartX = e.clientXstartY = e.clientYinitialX = panelPosition.value.xinitialY = panelPosition.value.ydocument.addEventListener('mousemove', onDrag)document.addEventListener('mouseup', stopDrag)
}// 鼠标移动事件
const onDrag = e => {if (!isDragging) returnconst dx = e.clientX - startXconst dy = e.clientY - startYlet newX = initialX + dxlet newY = initialY + dynewX = Math.max(newX, 8)newX = Math.min(newX, window.innerWidth - panelWidth - 8)panelPosition.value = {x: newX,y: newY}
}
// 鼠标释放事件
const stopDrag = () => {isDragging = falsedocument.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>