CSS scale()作用于父div后子可调整大小div拖拽调整异常如何解决

CSS scale 是渲染层的视觉变换，不会修改元素的实际DOM属性值：元素真实的宽高、坐标参数不会因为加了scale发生变化，只是最终渲染到屏幕上的时候被缩放显示。
你当前的计算逻辑用的pageX/pageY是页面坐标系下的真实像素偏移，和缩放容器内的坐标是不匹配的：当父级设置scale(1.6)时，页面上鼠标移动1.6px的实际距离，对应缩放容器内部的视觉位移才是1px。你直接拿实际偏移量赋值给子元素的宽高，相当于把位移量多放大了1.6倍，自然会出现拖拽结束后元素跳变到非预期位置的问题。

只需要把鼠标偏移量除以父级的缩放比例，校正坐标偏差即可，修改后的计算逻辑如下：

// 父级缩放比例，可硬编码也可动态读取
const scaleRatio = 1.6
const width = <div width at mouse down> + (mousemoveX - <pageX at mouse down>) / scaleRatio
const height = <div height at mouse down> + (mousemoveY - <pageY at mouse down>) / scaleRatio

如果需要动态获取父元素的缩放值，不需要硬编码，可以通过以下方式解析：

const wrapper = document.querySelector('#wrapper') // 替换为你的父级元素选择器
const transformStyle = window.getComputedStyle(wrapper).transform
// transform返回矩阵格式为matrix(a, b, c, d, e, f)，a为水平缩放值，d为垂直缩放值
const scaleRatio = transformStyle !== 'none' ? parseFloat(transformStyle.split(',')[0].slice(6)) : 1

如果父级同时存在平移、旋转等其他变换属性，你还需要做完整的坐标系矩阵转换，仅scale场景下上述方案可直接使用。

内容的提问来源于stack exchange，提问作者Jackson