通过vue实现可拖拽弹窗

原理：在前端页面中，想要实现通过鼠标拖拽改变元素的位置，大体可以有两种方式：

一、通过定位的方式，改变元素的position

二、通过transform的translate属性

推荐使用translate更适合，不会引起页面的重排和重绘，transform类的，可以使用GPU加速，提高浏览器的性能

const pupopRef = ref<HTMLDivElement>() // 弹窗容器
const titleRef = ref<HTMLDivElement>() // 鼠标按下的位置，我放在标题处
let prevX = 0, prevY = 0  // 记录上一次记录的位置
let countX = 0, countY = 0  // 记录位置累加的结果
let pointDown = false // 判断鼠标是否按下
let scaleRatio = 1 // 缩放系数，因为在不同缩放系数的时候，移动的像素需要乘以缩放系数
 
const moveFlag = () => countY < 660 && countY > -650 && countX > -3050 && countX < 3050
const moveFun = (e: any) => {
    if (pointDown && pupopRef.value) {
        const { clientX, clientY } = e
        countX += clientX - prevX
        countY += clientY - prevY
        if (moveFlag()) {
            pupopRef.value.style.transform = `translate(${countX / scaleRatio}px, ${countY / scaleRatio}px)`
        }
        prevX = clientX
        prevY = clientY
    }
}
const pointUpFun = () => pointDown = false
const resizeFun = () => scaleRatio = window.innerWidth / 6720
 
onMounted(() => {
    if (titleRef.value) {
        titleRef.value.addEventListener('pointerdown', ({ clientX, clientY }) => {
            prevX = clientX
            prevY = clientY
            pointDown = true
        })
        window.addEventListener('pointermove', moveFun)
        window.addEventListener('pointerup', pointUpFun)
    }
 
    window.addEventListener('resize', resizeFun)
    scaleRatio = window.innerWidth / 6720
})
 
onBeforeUnmount(() => {
    // 关闭弹窗的时候移除监听
    window.removeEventListener('pointermove', moveFun)
    window.removeEventListener('pointerup', pointUpFun)
    window.removeEventListener('resize', resizeFun)
})