Как определить, когда элемент находится над другим элементом в JavaScript?

Я написал большую часть кода... И когда элемент "полностью" над другим элементом, он работает. Проблема в том, что я не просто хочу, чтобы он был истинным, когда элемент "полностью" над элементом, я также хочу, чтобы он был истинным, когда элемент частично находится над другим элементом.

Вот мой код:

    element = this.element.getStyles('left', 'top', 'width', 'height');
    elementLeftX = element.left.toInt();
    elementLeftY = element.top.toInt();
    elementRightX = (element.width.toInt() + element.left.toInt());
    elementRightY = (element.top.toInt() + element.height.toInt());

    el = this.positions ? this.positions[i] : this.getDroppableCoordinates(el); // Element drop area
    elLeftX = el.left.toInt();
    elLeftY = el.top.toInt();
    elRightX = (el.width.toInt() + el.left.toInt());
    elRightY = (el.height.toInt() + el.top.toInt());

   if (((elLeftY <= elementLeftY) && (elementLeftY <= elRightY)) && ((elLeftY <= elementRightY) && (elementRightY <= elRightY))) {
        if (((elLeftX <= elementLeftX) && (elementLeftX <= elRightX)) && ((elLeftX <= elementRightX) && (elementRightX <= elRightX))) {
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }

Я очень сбит с толку, и я какое-то время играл, и я просто не могу заставить его работать.

Источник

3 ответа

Решение

Стандартный метод видеоигры:

doElsCollide = function(el1, el2) {
    el1.offsetBottom = el1.offsetTop + el1.offsetHeight;
    el1.offsetRight = el1.offsetLeft + el1.offsetWidth;
    el2.offsetBottom = el2.offsetTop + el2.offsetHeight;
    el2.offsetRight = el2.offsetLeft + el2.offsetWidth;

    return !((el1.offsetBottom < el2.offsetTop) ||
             (el1.offsetTop > el2.offsetBottom) ||
             (el1.offsetRight < el2.offsetLeft) ||
             (el1.offsetLeft > el2.offsetRight))
};

Посмотреть демо

Источник

Если вы заинтересованы в использовании jQuery (или если вы уже это делаете), есть несколько отличных плагинов для обнаружения столкновений. Вот предыдущий ответ с подробным описанием /questions/31286039/pozhalujsta-porekomendujte-plagin-jquery-kotoryij-obrabatyivaet-obnaruzhenie-stolknovenij-dlya-peretaskivaemyih-elementov/31286065#31286065

Источник

Когда вы пытаетесь это называется "обнаружение столкновений". Вам необходимо получить смещения и размеры элемента COMPUTED, а не только объявления стиля элемента.

Эта публикация может помочь объяснить:

обнаружение коллизий jQuery/JavaScript

Источник
Другие вопросы по тегам