you_are_enot
@you_are_enot
Пограммист любитель

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

Хочу сделать перетаскивание большого изображения внутри окна. Для изменения свойства 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/
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
При движении вверх или влево координаты искажаются.

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

https://jsfiddle.net/46vfg79L/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы