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

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

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// получить все изображения !!!в документе (можно использовать контейнер)
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
"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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
"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; 
 
  }
 
 
};

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .