export const initVDrag = (vue) => {
	vue.directive('drag', (el) => {
		const oDiv = el // 當(dāng)前元素
		oDiv.onmousedown = (e) => {
			let target = oDiv
			while (
				window.getComputedStyle(target).position !== 'absolute' &&
				target !== document.body
			) {
				target = target.parentElement
			}
			let parent = target.parentNode
			document.onselectstart = () => {
				return false
			}
			if (!target.getAttribute('init_x')) {
				target.setAttribute('init_x', target.offsetLeft)
				target.setAttribute('init_y', target.offsetTop)
			}
			// e.clientX, e.clientY是鼠標(biāo)點(diǎn)擊的位置
			// target.offsetLeft, target.offsetTop是當(dāng)前元素左上角的位置
			// 計(jì)算鼠標(biāo)按下的位置距離當(dāng)前元素左上角的距離
			const disX = e.clientX - target.offsetLeft
			const disY = e.clientY - target.offsetTop
			// target.clientWidth, target.clientHeight是當(dāng)前元素的尺寸
			// parent.clientWidth, parent.clientHeight是父元素的尺寸
			// parent.offsetLeft, parent.offsetTop是父元素左上角的位置
			// 可移動(dòng)范圍的位置
			const minX = parent.offsetLeft
			const maxX = parent.offsetLeft + parent.clientWidth - target.clientWidth
			const minY = parent.offsetTop
			const maxY = parent.offsetTop + parent.clientHeight - target.clientHeight
			document.onmousemove = (e) => {
				// 通過(guò)事件委托，計(jì)算移動(dòng)的距離,e是最新的鼠標(biāo)位置，disX、disY是鼠標(biāo)剛點(diǎn)擊時(shí)的位置
				let l = e.clientX - disX
				let t = e.clientY - disY
				// 約束移動(dòng)范圍在父元素區(qū)域內(nèi)
				if (l < minX) {
					l = minX
				} else if (l > maxX) {
					l = maxX
				}
				if (t < minY) {
					t = minY
				} else if (t > maxY) {
					t = maxY
				}
				// 給當(dāng)前元素樣式中的left和top賦值
				target.style.left = l + 'px'
				target.style.top = t + 'px'
			}
			document.onmouseup = (e) => {
				document.onmousemove = null
				document.onmouseup = null
				document.onselectstart = null
			}
			// 不return false的話，可能導(dǎo)致鼠標(biāo)黏連，鼠標(biāo)粘在dom上拿不下來(lái)，相當(dāng)于onmouseup失效
			return false
		}
	})
}

...
declare module '@utils/directive/vDrag.js'
...

...
import { createApp } from 'vue'
import { initVDrag } from '@/utils/directive/vDrag.js'
...
let instance: any = null
instance = createApp(App)
initVDrag(instance)
...

<template>
    <div v-drag />
</template>