3

требуется сделать подвижными для пользователя несколько элементов div (с помощью drag and drop) , сейчас у меня получается сделать подвижным только 1 элемент div . вот код :

var ball = document.getElementById('ball');

ball.onmousedown = function(e) {
  ball.style.position = 'absolute';
  moveAt(e);
  document.body.appendChild(ball);
  ball.style.zIndex = 1000;

  function moveAt(e) {
    ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
    ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
  }
  document.onmousemove = function(e) {
    moveAt(e);
  }
  ball.onmouseup = function() {
    document.onmousemove = null;
    ball.onmouseup = null;
  }
}
ball.ondragstart = function() {
  return false;
};
#ball {
  width: 200px;
  height: 200px;
  background-color: #465bfa;
  position: absolute;
}
<div draggable="true" id="ball"></div>

1 ответ 1

3

Просто добавляем прослушку каждому элементу отдельно... Все просто!

document.querySelectorAll('.ball').forEach((ball) => {
  ball.addEventListener('mouseup', () => ball.classList.remove('moving'));
  ball.addEventListener('mousedown', () => ball.classList.add('moving'));
  ball.onmousemove = (e) => [ball.style.top, ball.style.left] = ball.classList.contains('moving') ? [
    `${e.pageY - ball.offsetHeight / 2}px`,
    `${e.pageX - ball.offsetWidth / 2}px`,
  ] : [ball.style.top, ball.style.left];
})
.ball {
  width: 200px;
  height: 200px;
  position: absolute;
}

.ball:nth-child(1) {
  background-color: #465bfa;
}

.ball:nth-child(2) {
  background-color: #fa46be;
}

.ball:nth-child(3) {
  background-color: #fabb46;
}

.ball.moving {
  border: 1px solid black;
  z-index: 999;
}
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>

1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.