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

@Alborki · Регистрация: 28.01.2020

Author24 — интернет-сервис помощи студентам

Добрый день!
Есть задание: "Реализовать на JavaScript перетаскивание мышью по веб-странице нескольких любых
(но не мелких) изображений. Обрабатывать как минимум события mousedown, mousemove, mouseup.
Изображения должны «таскаться» мышью за любую точку (т.е. и при «взятии» и при «отпускании» изображение смещаться не должно, оно должно смещаться только при смещении мыши при нажатой левой кнопке, ровно настолько, насколько смещена мышь).
Код не должен зависеть от количества картинок (т.е. код должен сам найти все картинки, находящиеся в указанном div-контейнере).....
Количество картинок изначально может быть любое и они по умолчанию не спозиционированны (стилевое свойство positiion не задано)."
По моему пониманию сначала нужно найти изначальные координаты этих картинок, после задать им эти координаты и задать им position: absolute, а дальше реализовывать перетаскивание.
Начало кода я написал, но у меня вопрос: Как передать картинкам найденные позиции top и left при условии что ни будут у каждой картинки разные? Как каждой картинке передать именно ее изначальную позицию?
Нужен только ответ на этот вопрос. Все решение не нужно.

HTML5

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <div class="imgBox">
        <img src="https://www.cyberforum.ru/images/cat1.jpg" >
    <img src="https://www.cyberforum.ru/images/cat2.jpg" >
    <img src="https://www.cyberforum.ru/images/cat3.jpg" >    
    <img src="https://www.cyberforum.ru/images/cat5.jpg" >
    <img src="https://www.cyberforum.ru/images/cat6.jpg" >
  </div>
 
  <script src="script.js"></script>
</body>
</html>

Javascript

"use strict";
 
window.addEventListener('load', posElem, false);
function posElem(EO) {
  var elems = document.getElementsByTagName('img');
 
  for (var i = elems.length-1; i>= 0; i--) {
    var elem = elems[i];
   
    elem.offsetLeft;
    elem.offsetTop; 
   
  }
 
};

Добавлено через 3 часа 23 минуты

@MutusLiber · 05.02.2020, 12:29

Alborki, приведу простой пример ниже. Код полностью документирован, поэтому разобраться не составит труда. Основной принцип, который лежит в основе решения Вашей задачи, это вычисление абсолютного положения курсора мыши минус смещение курсора мыши относительно самого изображения.

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body style="position: relative; margin: 0;">   
    <img src="BlackMare.png" style="position: absolute; top: 0; left: 0;">
    <img src="BlackMare.png" style="position: absolute; top: 0; left: 250px;">
    <img src="BlackMare.png" style="position: absolute; top: 250px; left: 50px;">
    <script src="index.js"></script>
</body>
</html>

Javascript

// получить все изображения !!!в документе (можно использовать контейнер)
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);
  }
}

@Alborki · 11.02.2020, 23:08 **[ТС]**

Спасибо, но я немножко не это хотел увидеть. Нужен был ответ только на этот вопрос: "...Как передать картинкам найденные позиции top и left при условии, что ни будут у каждой картинки разные? Как каждой картинке передать именно ее изначальную позицию?..." , а не все решение

.
Но, в любом случае, спасибо. Мне очень понравилось ваше решение и благодарю за быстрый отклик.

И раз на то пошло, кому интересно, предлагаю мой вариант решения. Напоминаю, условие было, что все картинки изначально не спозиционированны (т.е. стилевое свойство positiion: absolute не задано в НTML/CSS-коде):

HTML5

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <div id='box' class="imgBox">
        <img src="images/cat1.jpg" >
    <img src="images/cat2.jpg" >
    <img src="images/cat3.jpg" >    
    <img src="images/cat5.jpg" >
    <img src="images/cat6.jpg" >
  </div>
 
  <script src="script.js"></script>
</body>
</html>

Javascript

"use strict";
 
window.addEventListener('load', posElem, false);
function posElem(EO) {
  EO = EO || window.event;
  var elems = document.getElementsByTagName('img');
 
  for (var i = elems.length - 1; i >= 0; i--) {
    var elem = elems[i];
 
    elem.style.top = elem.offsetTop + 'px';
    elem.style.left = elem.offsetLeft + 'px';
    elem.style.position = 'absolute';
    elem.onmousedown = imgMouseDown;
    elem.onmouseup = imgMouseUp;
  };
 
 
  function imgMouseDown(EO) {
    EO = EO || window.event;
    EO.preventDefault();
    console.log('Нажал на кота');
 
    var dounShiftCoordX = EO.pageX - EO.target.offsetLeft;
    var dounShiftCoordY = EO.pageY - EO.target.offsetTop;
 
 
    window.onmousemove = imgMouseMove;
 
    function imgMouseMove(EO) {
      EO = EO || window.event;
      EO.preventDefault();
      console.log('Тащу кота');
 
      EO.target.style.top = (EO.pageY - dounShiftCoordY) + 'px';
      EO.target.style.left = (EO.pageX - dounShiftCoordX) + 'px';
 
      var cont = document.getElementById('box');//Что-то неправильно в 38-40 строках. cont.appendChild(pict) не согласен со мной, что он функция в imgMouseMove
      var pict = EO.target;
      cont.appendChild(pict);
 
 
 
    }
  }
 
  function imgMouseUp(EO) {
    EO.preventDefault();
    console.log('Отпустил кота');
 
    window.onmousemove = null; // Как отменить  onmousemove после mauseup 
 
  }
 
 
};

Такой код позволяет реализовать перетаскивание в независимости от позиций, которые задаст им верстальщик через HTML/CSS. Он может задать им любые margin или position. Мы всегда найдем картинки и зададим ей нужную позицию.

Добавлено через 2 часа 9 минут
Но есть проблема в этом решении. Если резко дернуть мышкой с края картинки в сторону, будет ошибка в консоли и некорректно выполнится перетаскивание.
Пока не могу понять в чем дело

@Alborki · 19.02.2020, 13:24 **[ТС]**

Доброго времени суток!
Вот, надеюсь, финальный вариант решения.
Исправлены ошибки.
Благодарю всех за внимание и участие!

HTML5

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <div id='box' class="imgBox">
        <img src="images/cat1.jpg" >
    <img src="images/cat2.jpg" >
    <img src="images/cat3.jpg" >    
    <img src="images/cat5.jpg" >
    <img src="images/cat6.jpg" >
  </div>
 
  <script src="script.js"></script>
</body>
</html>

Javascript

"use strict";
 
window.addEventListener('load', posElem, false);
function posElem(EO) {
  EO = EO || window.event;
  var elems = document.getElementsByTagName('img');
 
  for (var i = elems.length - 1; i >= 0; i--) {
    var elem = elems[i];
 
    elem.style.top = elem.offsetTop + 'px';
    elem.style.left = elem.offsetLeft + 'px';
    elem.style.position = 'absolute';
    elem.onmousedown = imgMouseDown;
    elem.onmouseup = imgMouseUp;
  };
 
 
  function imgMouseDown(EO) {
    EO = EO || window.event;
    EO.preventDefault();
    console.log('Нажал на кота');
 
    var dounShiftCoordX = EO.pageX - EO.target.offsetLeft;
    var dounShiftCoordY = EO.pageY - EO.target.offsetTop;
 
    var cont = document.getElementById('box');
    var pict = EO.target;
    cont.appendChild(pict);
 
 
    window.onmousemove = imgMouseMove; 
    function imgMouseMove(EO) {
      EO = EO || window.event;
      EO.preventDefault();
      console.log('Тащу кота');
 
      pict.style.top = (EO.pageY - dounShiftCoordY) + 'px';
      pict.style.left = (EO.pageX - dounShiftCoordX) + 'px';
 
    }
  }
 
  function imgMouseUp(EO) {
    EO.preventDefault();
    console.log('Отпустил кота');
 
    window.onmousemove = null; 
 
  }
 
 
};

	19.02.2020, 13:24