使用scale缩放body时，拖拽元素无法保持相对光标位置的问题

当页面通过transform: scale()缩放后，拖拽元素会出现偏移、无法跟住光标，核心原因是鼠标事件的坐标基于原始页面尺寸，而元素的定位是在缩放后的坐标系下，直接用原始位移计算会导致移动距离不匹配。确实可以通过当前缩放值作为调整因子来修正这个问题，具体修改如下：

修改思路 #

1. 让拖拽函数能访问当前的缩放值zoom
2. 计算鼠标位移时，将位移量除以当前缩放值，得到适配缩放后的元素移动距离

修改后的完整代码 #

页面缩放函数 #

let zoom = 1;
const zoom_speed = 0.1;

function page_zoom(container_id) {
    const container = document.getElementById(container_id);
    document.addEventListener("wheel", function(e) {
        // 限制缩放范围，避免异常
        if(e.deltaY > 0) {
            zoom = Math.max(0.1, zoom + zoom_speed);
        } else {
            zoom = Math.min(3, zoom - zoom_speed);
        }
        container.style.transform = `scale(${zoom})`;
    });
}

元素拖拽函数 #

function make_element_draggable(id) {
    const elem = document.getElementById(id);
    elem.style.position = "absolute";
    let initX, initY, firstX, firstY, whichDown;
    
    window.addEventListener("mouseup", function() {
        if(whichDown) {
            whichDown.style.zIndex = 0;
        }
        whichDown = null;
    }, false);
    
    window.addEventListener("mousemove", draggable, false);
    
    elem.addEventListener("mousedown", function(e) {
        e.preventDefault();
        whichDown = this;
        initX = this.offsetLeft;
        initY = this.offsetTop;
        firstX = e.pageX;
        firstY = e.pageY;
    });

    function draggable(e) {
        e.preventDefault();
        if(!whichDown) return;
        
        whichDown.style.zIndex = 9;
        // 用缩放值修正位移，让元素精准跟随光标
        const deltaX = (e.pageX - firstX) / zoom;
        const deltaY = (e.pageY - firstY) / zoom;
        whichDown.style.left = initX + deltaX + "px";
        whichDown.style.top = initY + deltaY + "px";
    }
}

HTML结构 #

<body id="body">
    <div id="container">
        <a id="text_1">TEXT 1</a>
    </div>
</body>

调用方式 #

make_element_draggable("text_1")
page_zoom("body")

原理说明 #

当页面缩放为zoom倍时，视觉上的1像素对应原始页面的1/zoom像素。鼠标事件的pageX/pageY是基于原始页面的像素值，因此需要将鼠标位移除以zoom，才能得到在缩放后坐标系下元素应该移动的距离，这样就能保证元素始终跟住光标。

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