如何拖动缩放的元素

Question

我在做一个拖拽的图像。它按其应有的方式工作。我也有缩放图像的按钮。在缩放后，药物起作用，但它削减了位置。我找不到合适的词来描述这个behavior.At图像的第一个动作稍微改变了它的位置

我还需要做什么计算。缩放元素后，若要获得平滑拖动，请执行以下操作。

https://codesandbox.io/s/laughing-tree-1zqhf?file=/src/App.js

提前谢谢你

Answer 1

你必须保持初始的X，并且只计算移动的差值。

const onMouseDown = e => {
    e.persist();
    var initialX = e.pageX;
    const onMouseMove = ev => {
      var newX = initialX - ev.pageX;
      setX(x - newX);
    };


    const onMouseUp = () => {
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onMouseUp);
    };

    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);
  };

指向分支沙箱的链接：https://codesandbox.io/s/compassionate-ishizaka-kvmnk?file=/src/App.js