Алгоритм получения координат элемента?

Question

[grom111]

Ребят прошу прощения за возможно глупый вопрос и свою надоедливость.
У меня есть задача реализовать игру крестики-нолики.
Drag & drop я уже сделал, осталось сделать захват элемента на одной из областей квадрата.
Алгоритм я себе выбрал такой:
1. Получить координаты ячейки.
2. Получить координаты крестика/нулика.
3. Если их координаты совпадают, то ячейка.appendChild(крестик/нулик).

Но что-то как я не пытаюсь получить координаты ячеек и крестика/нулика, то они не совсем совпадают.

Делал так:

const mouseUp = (e) => {
    isActive = false;
    const container = document.querySelector('.container'),
        targetElement = e.target,
        boxes = container.querySelectorAll('.box');
    for (let i = 0; i < boxes.length; i++) {
        let coords = boxes[i].getBoundingClientRect();
        console.log(coords);
    }
    console.log(targetElement.getBoundingClientRect());
    targetElement.removeEventListener('mousemove', moveElement);
}

Весь код
Но что-то походу я туплю. Не совсем могу разобраться в получении координат.
Можете подсказать что я делаю не так и какие лучше методы использовать ?

Answer 1

[0xD34F]

Можете подсказать что я делаю не так

Да всё так. Не хватает только сравнения координат элементов .box и координат перемещаемой картинки. А именно - вторые должны быть больше left/top и меньше left+width/top+height первых. Четыре неравенства, ничего сложного.

Comments

[grom111]

Почти также сделал за ночь, но код больше вышел)
Спасибо))