vue3中实现基础拖拽移动功能

引入@vueuse/core 方便使用useEventListener, useThrottleFn

随意一个dom节点，监听mousedown方法

<template>
	<div @mousedown="handleMouseDown">简单实现拖拽移动</div>
</template>

核心逻辑就是：

1. 通过监听需要拖拽的dom节点mousedown事件，获取点击时dom节点之前的偏移量offsetX、offsetY(默认是0，第一次未偏移)和当前鼠标所在的pageX、pageY记为startX、startY
2. 监听mousemove 事件，获取鼠标移动时的pageX、pageY
3. 计算偏移量pageX - startX + offsetX

完整代码

<script setup>
import { useEventListener, useThrottleFn } from '@vueuse/core'
import { computed, ref } from 'vue'

const transform = ref({
	offsetX: 0,
	offsetY: 0
})
const styles = computed(()=>{
	const { offsetX, offsetY} = transform.value
  return {
    transform: `translate(${offsetX}px, ${offsetY}px)`
  }
})

function handleMouseDown(e){
	const { offsetX, offsetY} = transform.value
	const startX = e.pageX
	const startY = e.pageY
	const handleDrap = useThrottleFn((ev)=>{
		transform.value = {
			offsetX: ev.pageX - startX + offsetX,
			offsetY: ev.pageY - startY + offsetY
		}
	}, 16)
	// useEventListener 返回一个注销函数
	const removeMouseMove = useEventListener(document, 'mousemove', handleDrap)
	useEventListener(document, 'mouseup', () => {
		removeMouseMove()
	})
	e.preventDefault()
}

</script>
<template>
	<div @mousedown="handleMouseDown" :style="styles">简单实现拖拽移动</div>
</template>