@ICE777

Как переместить html элементы с одинаковыми классами?

<div class="item">
    1
  </div><br>
  <div class="item">
    2
  </div><br>
  <div class="item">
    3
  </div>

dragElement(document.querySelectorAll(".item"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

  function dragMouseDown(e) {
    e = e || window.event;
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }


Допустим есть такие элементы, как сделать так чтобы если я хотел перетащить один из элементов и он перемещался (не все другие а только на котором зажал мышку).

У меня с id проблем не возникало но с классами такое не работает.
И пожалуйста только на JS.
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ответы на вопрос 1
JamesHatfield
@JamesHatfield
Front-end developer
Метод querySelectorAll создает массив из элементов с одинаковым классом, чтоб обратиться к одному из них, нужно обращаться как к элементу массива, например:
let items = document.querySelectorAll(".item");
items[0].style.backgroundColor = 'red';


Если ваша функция написана правильно и работала с элементами id, тогда попробуйте ее запустить так:
let items = document.querySelectorAll(".item");
dragElement(items[0]);


Должна начать работать только с первым элементом. Как сделать с остальными думаю сами догадаетесь.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы