Реализовать на JS перетаскивание мышью нескольких изображений - JavaScript - Ответ 14228874

// получить все изображения !!!в документе (можно использовать контейнер)
const images = document.getElementsByTagName("img");
 
// слушаем события движения курсора мыши относительно окна браузера
window.addEventListener("mousemove", mouseMove);
 
// обработчик движения курсора мыши относительно окна браузера ======
function mouseMove(event) {
  // если "ЛКМ" зажата
  if (Mouse.Lbtn) {
    Mouse.posX = event.clientX; // текущая координата по оси Х
    Mouse.posY = event.clientY; // текущая координата по оси Y
  }
}
// ==================================================================
 
// объект состояния мыши =============================================
let Mouse = {
  targetImage: null, // целевой объект (активное изображение)
  posX: null, // позиция курсора по оси Х (относительно окна браузера)
  posY: null, // позиция курсора по оси Y (относительно окна браузера)
  dx: null, // позиция курсора по оси Х (относительно изображения)
  dy: null, // позиция курсора по оси Y (относительно изображения)
  Lbtn: false // статус "ЛКМ" (по умолчанию "ЛКМ" отпущена)
};
// ===================================================================
 
// обходим HTML коллекцию изображений и добавляем 2 обработчика
// событий для каждого из них. "onmousedown" и "onmouseup"
for (let index = 0; index < images.length; index++) {
  images[index].onmousedown = imageMouseDown;
  images[index].onmouseup = imageMouseUp;
}
 
// обработчик "ЛКМ" нажата
function imageMouseDown(event) {
  event.preventDefault(); // отменяем дефолтное поведение
  Mouse.targetImage = this; // задаем целевой объект изображения
  Mouse.Lbtn = true; // статус "ЛКМ" переводим в "true"
  // задаем текущее положение курсора
  Mouse.posX = event.clientX;
  Mouse.posY = event.clientY;
  // задаем смещение курсора (относительно изображения)
  Mouse.dx = event.layerX;
  Mouse.dy = event.layerY;
  // запускаем анимацию перемещения изображения
  imageMove();
}
 
// обработчик "ЛКМ" отпущена
function imageMouseUp() {
  Mouse.Lbtn = false; // статус "ЛКМ" переводим в "false"
  Mouse.targetImage = null; // сбрасываем целевой объект изображения
}
 
// перемещение изображения
function imageMove() {
  // если статус "ЛКМ" "true"
  if (Mouse.Lbtn) {
    // задаем inline стили для изображения. Свойству top и left
    // присваиваем значение текущего положения курсора минус
    // смещение курсора относительно изображения
    Mouse.targetImage.style.top = Mouse.posY - Mouse.dy + "px";
    Mouse.targetImage.style.left = Mouse.posX - Mouse.dx + "px";
    // запрашиваем событие анимации. В качестве callback пердаем
    // текущую функцию. Анимация будет повторяться до тех пор
    // пока статус "ЛКМ" не перейдет в состояние "false"
    window.requestAnimationFrame(imageMove);
  }
}