Как перетащить масштабированный элемент - PullRequest
Новая
       4

Как перетащить масштабированный элемент

1 голос
/ 22 апреля 2020

Я делаю перетаскиваемое изображение. Работает как надо. У меня также есть кнопки, которые масштабируют изображение. после масштабирования препарат работает, но он сокращает положение. Я не могу найти подходящих слов, чтобы описать это поведение. При первом движении изображение немного меняет свою позицию

, какие вычисления мне нужно сделать тоже. чтобы получить плавное перетаскивание, после масштабирования элемента.

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

Заранее спасибо

1 Ответ

1 голос
/ 22 апреля 2020

Вы должны сохранить начальный 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

...