标签：rect element 字符串 不能 问题： tran 计算 位置 get
问题：不同分辨率下小球移动至购物车徽标
解决：不能把位置横纵坐标写死，根据不同情况动态计算这个坐标值
先得到徽标的横纵坐标再得到小球的横纵坐标，然后横坐标值求差，纵坐标值求差，结果就是要移动的距离
Vue 中不推荐操作DOM元素，解决不了稍微写一点还可以。
小球横纵坐标：
const ballLeft = document.getElementById(‘ball‘).getBoundingClientRect().left; const ballTop = document.getElementById(‘ball‘).getBoundingClientRect().top; // console.log(ballLeft) // console.log(ballTop)
徽标横纵坐标：
const shopCarLeft = document.getElementById(‘shopCar‘).getBoundingClientRect().left; const shopCarTop = document.getElementById(‘shopCar‘).getBoundingClientRect().top; // console.log(shopCarLeft) // console.log(shopCarTop)
求差值，差值就是小球要移动的坐标距离
const X = shopCarLeft - ballLeft; const Y = shopCarTop - ballTop; // console.log(X,Y)
最后，使用模板字符串
el.style.transform = `translate(${X}px,${Y}px)`;
标签：rect element 字符串 不能 问题： tran 计算 位置 get
原文地址：https://www.cnblogs.com/zhaohui-116/p/12249981.html
