原理:在前端页面中,想要实现通过鼠标拖拽改变元素的位置,大体可以有两种方式:
一、通过定位的方式,改变元素的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)
})