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

Question

[ICE777]

<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.

Comments

[Денис Ильиных]

может все элементы загнать в массив , изменить порядок элементов и вывести в новом порядке ?

Answer 1

[Сергей Зенькович]

Метод querySelectorAll создает массив из элементов с одинаковым классом, чтоб обратиться к одному из них, нужно обращаться как к элементу массива, например:

let items = document.querySelectorAll(".item");
items[0].style.backgroundColor = 'red';

Если ваша функция написана правильно и работала с элементами id, тогда попробуйте ее запустить так:

let items = document.querySelectorAll(".item");
dragElement(items[0]);

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

Comments

[ICE777]

Это понятно я это понимаю, но вы не до конца меня поняли скажу на другом примере:
Есть 4 окна с одинаковыми классами и я хотел чтобы можно было каждого перетаскивать.
Если делать по id это глупость ибо окон может быть очень много, так-же давать каждому окну отдельный класс такая-же история.
Думаю я уточнил понятно можете помочь?

[Сергей Зенькович]

Не стал разбирать ваш код и набросал свой, но думаю что суть вам будет понятна. Но есть один баг: когда курсор выходит за пределы итема, тогда он останавливается. Как его пофиксить напишу позже, а пока сами подумайте

<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>

.block{
	margin: 10px;
	width: 100px;
	height: 100px;
	text-align: center;
	background-color: #447;
}

window.onmousedown = function(e) {
	if(e.target.className == 'block') {
		e.target.onmousemove = function(e) {
			e.target.style.position = "absolute";
			e.target.style.left = e.pageX-e.target.offsetWidth/2+"px";
			e.target.style.top = e.pageY-e.target.offsetHeight/2+"px";
		}
		e.target.onmouseup = function(e) {
			e.target.onmousemove = null;
		}
	}
}

[Сергей Зенькович]

Такой код работает без багов:

<div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>

.block{
  margin: 10px;
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #447;
}

window.addEventListener('mousedown', function(e) {
	if(e.target.className == 'block') {
		e.target.onmousemove = function(e) {
			e.target.style.position = "absolute";
			e.target.style.left = e.pageX-e.target.offsetWidth/2+"px";
			e.target.style.top = e.pageY-e.target.offsetHeight/2+"px";
		}
		
		e.target.onmouseout = function(e) {  
			e.target.style.position = "absolute";
			e.target.style.left = e.pageX-e.target.offsetWidth/2+"px";
			e.target.style.top = e.pageY-e.target.offsetHeight/2+"px";
		}
		
		e.target.onmouseup = function(e) {
			e.target.onmousemove = null;
			e.target.onmouseout = null;
		}
	}
});

[Сергей Зенькович]

Напишите, если помогло!!

[ICE777]

Хорошо, уточнение а как сделать вместо window переборку на класс?

[Сергей Зенькович]

ICE777, вместо window можете повешать обработчик на родительский элемент в котором находятся элементы с одинаковыми классами.