Как реализовать правильное изменение свойства translate?

Question

[Евгений]

Хочу сделать перетаскивание большого изображения внутри окна. Для изменения свойства transform: translate(X, Y) используется механизм drag and drop. Запоминаются координаты onmousedown и onmousemove, после чего из конечных координат вычитаем начальные и получаем расстояние на которое нужно сместить изображение.

let dX = positionMove.x - positionDown.x;
let dY = positionMove.y - positionDown.y;

При первом перетаскивании, когда translate(0, 0) всё работает отлично. Но при повторных перетаскиваниях, он хорошо работает при перетаскивании вниз и вправо. При движении вверх или влево координаты искажаются.

Вот код:
https://jsfiddle.net/9ym2vL30/

Answer 1

[0xD34F]

При движении вверх или влево координаты искажаются.

Это потому что отрицательный translate, вы минус не учитываете, когда регулярным выражением достаёте значения.

https://jsfiddle.net/46vfg79L/