缩放主体时，相对于 cursor 拖动元素不保持 position（使用比例）

Question

I want to achieve 2 things on my page:我想在我的页面上实现两件事：

drag HTML elements on the screen;在屏幕上拖动 HTML 元素；
zoom the page using the "wheel" event.使用“wheel”事件缩放页面。

I can accomplish both of these as follows:我可以通过以下方式完成这两项工作：

Element Drag:元素拖动：

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;
        whichDown.style.left = initX + e.pageX - firstX + "px";
        whichDown.style.top = initY + e.pageY - firstY + "px";
    }
}

Page Zoom :页面缩放：

function page_zoom(container_id) {
    zoom = 1;
    zoom_speed = 0.1;
    const container = document.getElementById(container_id);
    document.addEventListener("wheel", function(e) {
        if(e.deltaY > 0) {
            container.style.transform = `scale(${zoom += zoom_speed})`;
        } else {
            container.style.transform = `scale(${zoom -= zoom_speed})`;
        }
    });
}

HTML : HTML ：

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

Usage:用法：

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

Here is the result.这是结果。

Notice how the drag works perfectly when no zoom in enabled (text remains centered in the circle), but once zoom in enabled the text no longer maintains its position relative to the cursor.请注意，当没有启用放大时（文本保持在圆圈的中心），拖动是如何完美地工作的，但是一旦启用放大，文本不再保持其 position 相对于 cursor。

Is there a way to compensate for zoom amount, perhaps using it as a factor to adjust the top and left settings of the drag function?有没有办法补偿缩放量，也许使用它作为调整拖动 function 的top和left设置的因素？

Here is a CODEPEN showing all the code.这是一个显示所有代码的CODEPEN 。 Drag the text element, then zoom using your mouse wheel (trackpad on Mac), and notice the incorrect positioning of the text element relative to the cursor.拖动文本元素，然后使用鼠标滚轮（Mac 上的触控板）进行缩放，并注意文本元素相对于 cursor 的位置不正确。

Answer 1

You forgot to take in account zoom when dragging:拖动时忘记考虑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. whichDown.style.left = initX + (e;pageX - firstX)/zoom + "px". whichDown.style.top = initY + (e;pageY - firstY)/zoom + "px"; } } function page_zoom(container_id) { zoom = 1. zoom_speed = 0;1. const container = document;getElementById(container_id). document,addEventListener("wheel". function(e) { if(e.deltaY > 0) { container.style;transform = `scale(${zoom += zoom_speed})`. } else { container.style;transform = `scale(${zoom -= zoom_speed})`; } }); } page_zoom("body") make_element_draggable("text_1")

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

缩放主体时，相对于 cursor 拖动元素不保持 position（使用比例）

问题描述

1 个解决方案

解决方案1
0 2022-08-30 16:00:00

缩放主体时，相对于 cursor 拖动元素不保持 position（使用比例）

问题描述

1 个解决方案

解决方案1 0 2022-08-30 16:00:00

解决方案1
0 2022-08-30 16:00:00