Javascript перетаскиваемый

Я пытаюсь создать страницу, на которой пользователь может перетаскивать изображения в любое место на экране: в моем HTML-файле изображения имеют class = draggable. Я не могу заставить изображения переместиться туда, куда они перетаскиваются. Ниже мой код javascript:

const draggables = document.querySelectorAll('.draggable');
console.log(draggables);

var isDown = false;

draggables.forEach((draggable) => {

  draggable.addEventListener('mousedown',function(e){
    isDown = true;
    offset = [
      draggable.offsetLeft - e.clientX,
      draggable.offsetTop  - e.clientY
    ];
    console.log("mousedown")
  }, true)

  document.addEventListener('mouseup', function(){
      isDown = false;
  }, true)

  document.addEventListener("mousemove",function(e){
    event.preventDefault();
    if(isDown){
      draggable.style.left = (e.clientX + offset[0]) + 'px';
      draggable.style.top = (e.clientY + offset[1] + 'px');
    }
  }, true)
});

javascript html drag draggable drop
person Abby Saadeh    schedule 27.01.2021    source источник
comment
Это должно ответить на ваш вопрос: w3schools.com/jsref/event_ondrag.asp   -  person coder9927    schedule 27.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

ИСПРАВЛЕНО Вот работающий код:

const draggables = document.querySelectorAll('.draggable');
console.log(draggables);

var isDown = false;
var current;

draggables.forEach((draggable) => {
  draggable.addEventListener('mousedown',function(e){
    isDown = true;
    offset = [
      draggable.offsetLeft - e.clientX,
      draggable.offsetTop  - e.clientY
    ];
    current = draggable;
    console.log("mousedown", offset)

  }, true)
});

  document.addEventListener('mouseup', function(){
      isDown = false;
      console.log("mouseup")
  }, true)

  document.addEventListener("mousemove",function(e){
    event.preventDefault();
    console.log("mousemove")
    if(isDown){
      current.style.left = (e.clientX + offset[0]) + 'px';
      current.style.top = (e.clientY + offset[1] + 'px');
    }

  }, true)
person Abby Saadeh    schedule 27.01.2021