如何拖动缩放的元素

Question

我正在制作一个拖动的图像。它可以正常工作。我也有缩放图像的按钮。缩放后，药物起作用，但它会切断位置。我找不到合适的词来描述这种行为。在第一个动作中，图像的位置略有变化

我还需要做什么计算。在缩放元素后获得平滑的拖动。

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