Создать класс "двигающихся" объектов

Question

Есть тестовый сайт, на котором уже есть 2 объекта, которые могу хватать и перетаскивать. Работает алгоритм на 2 переменных "div" и "div2" - соответственно они же и id этих двух объектов.

Теперь вопрос, можно ли (предполагаю, что да, но не знаю, как) работать не через ID и прописывать отдельный скрипт для движения и хватания каждого объекта, а создать класс по типу "moveable" и для него прописать скрипты хватания и движения. Просто с js знаком буквально 2 дня и не знаю, как это все прописать для классов, а не для id. Потому что, как минимум, в самом начале в мою переменную "div" передастся не один объект, а сразу группа (массив) элементов с этим классом. И как для каждого из них прописывать проверку нажатия и перетаскивания, я не знаю. Вот ссылка на код

И на всякий случай, сюда его тоже добавлю

var mousePosition;
var offset = [0,0];
var div = document.getElementById("div");
var div2 = document.getElementById("div2");
var isDown = false;
var isDown2 = false;
var last = false;

//Если пользователь схватил первый div
div.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        this.offsetLeft - e.clientX,
        this.offsetTop - e.clientY
    ];
}, true);

//Если пользователь схватил второй div

div2.addEventListener('mousedown', function(e) {
    isDown2 = true;
    offset = [
        div2.offsetLeft - e.clientX,
        div2.offsetTop - e.clientY
    ];
}, true);

//Пользователь отпустил ЛКМ

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

//Функция движения первого div

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

//Функция движения второго div

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown2) {
        mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div2.style.left = (mousePosition.x + offset[0]) + 'px';
        div2.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

//Смена позиции объектов

document.getElementById('but').onclick = function() {
  if (last == false) {
    document.getElementById('div2').classList.add("back");
    last = true;
  } else {
    document.getElementById('div2').classList.remove("back");
    last = false;
  }
}

body {
  background-color: #081C24;
  overflow: hidden;
}
#div {
  background: blue;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  position: absolute;
  cursor: pointer;
}

#div2 {
  width: 100px;
  height: 100px;
  position: absolute;
  background: red;
  top: 10px;
  left: 10px;
  cursor: pointer;
}
.back {
  z-index: -1;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title></title>
  </head>
  <body>
    <div id="div"></div>
    <div id="div2"></div>
    <button type="button" id="but" name="button"></button>
    <script src="script.js"></script>
  </body>
</html>

Answer 1

document.getElementsByClassName(args[]) – вернёт коллекцию всех элементов с подходящими классами.

var test = parentDOM.getElementsByClassName(class); //HTMLCollection[n]
var testTarget = parentDOM.getElementsByClassName(class)[0]; //первый подходящий по имени класса формата HTML-элемент`

Соответственно, дальше можно работать со списком полученным. Рекомендую почитать про коллекцию и всё же использовать ID внутри для большей безопасности кода и удобства использования.

БЛОГ НА HUSL

Создать класс "двигающихся" объектов

Ответы (1 шт):