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

Question

[ICE777]

<div class="a1">1</div>
<div class="a1">2</div>
<div class="a1">3</div>
<div class="z36">4</div>

Пример у нас есть 4 блока и 3 из них имеют одинаковые классы один имеет другой класс (для разнобраности), суть такова чтобы при зажиме на каком-то из элементов "а1" он передвигался за курсором и при отпускании остался там где был отпущен (обычное перетаскивание думаю понятна его суть).

С айди элементов у меня получилось но с классами нет, намного выгодней добавить один класс к элементам чем к каждому новый айди.

Comments

[Absolute138]

https://jsbin.com/usizoh/4/edit?html,css,js,output

Answer 1

[dollar]

Можно с помощью JS добавить id элементам.

Например, как-то так:

document.querySelectorAll('div.a1').forEach(e => {
  e.id = "a1_" + (window.new_id ? ++new_id : new_id = 1);
});

Но это лишь пример. Лучшая оптимизация зависит от конкретного сайта и от нюансов конкретной задачи. Хотя, если там 5-10 элементов, можно и забить на оптимизацию, лишь бы не setInterval :)

Comments

[ICE777]

Не выгодно, только классы.

[dollar]

ICE777, что значит не выгодно? Проставление id происходит лишь единожды, используется лишь один селектор.

Answer 2

[Alex]

По нажатию кнопки, определяете над каким элементом сейчас курсор. И не важно что у него ИД, класс, артибуты ... Вы просто определяете один конкретный элемент и сохраняете его в переменную. Курсор двигается и вы за ним двигаете элемент из переменной. Можно вообще обойтись без классов