Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.10.2014, 10:57
Кандидат Javascript-наук
Отправить личное сообщение для zhurchik Посмотреть профиль Найти все сообщения от zhurchik
 
Регистрация: 04.06.2011
Сообщений: 116

Определить, перекрыт ли блок.
Приветствую.
Возможно ли средствами JS определить, перекрывается блок А блоком B?
К примеру, я использую позиционирование и у меня имеется 10 блоков, блоки перекрывают друг друга не полностью.
Так вот, можно ли при наведении мыши на тот или иной блок определить перекрыть он другим или нет?
Ответить с цитированием
  #2 (permalink)  
Старый 20.10.2014, 11:24
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Блоки прямоугольные?
Если хотя бы одна из вершин находится внутри другого блока, значит перекрывают.
Ответить с цитированием
  #3 (permalink)  
Старый 20.10.2014, 11:32
Кандидат Javascript-наук
Отправить личное сообщение для zhurchik Посмотреть профиль Найти все сообщения от zhurchik
 
Регистрация: 04.06.2011
Сообщений: 116

BETEPAH,
Да, прямоугольные.
А как определить, что одна из вершин находится внутри другого блока?
Ответить с цитированием
  #4 (permalink)  
Старый 20.10.2014, 12:05
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

zhurchik,
по координатам, вестимо.
Если у нас есть прямоугольник с вершинами TopLeft, TopRight, BottomLeft, BottomRight, проверяем входит ли в него точка Point:
(Point.x > TopLeft.x && Point.x < TopRight.x && Point.y > TopLeft.y && Point.y < BottomLeft.y)
Ответить с цитированием
  #5 (permalink)  
Старый 20.10.2014, 12:52
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<meta charset="UTF-8" />
<style>
    #a, #b{
        position: absolute;
        width: 100px;
        height: 100px;
    }
    #a{
        top: 120px;
        left: 120px;
        background: rgba(255, 0, 0, 0.5);
        cursor: move;
        z-index: 1;
    }
    #b{
        top: 10px;
        left: 10px;
        background: rgba(0, 255, 0, 0.5);
        z-index: 0;
    }
</style>
<div id="a"></div>
<div id="b"></div>
<div id="info"></div>
<script>
    var offsetX;
    var offsetY;
    function drag(e) {
        a.style.top = e.pageY - offsetY + 'px';
        a.style.left = e.pageX - offsetX + 'px';
    }
    a.addEventListener('mousedown', function(e) {
        offsetX = e.layerX;
        offsetY = e.layerY;
        document.addEventListener('mousemove', drag);
        e.preventDefault();
    });
    document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', drag);
    });
    document.addEventListener('mousemove', function(e) {
        var point = {x: e.pageX, y: e.pageY};
        if (isPointInRect(point, a.getBoundingClientRect()) && isPointInRect(point, b.getBoundingClientRect())) {
            info.textContent = 'Пересекает';
        } else {
            info.textContent = 'Не пересекает';
        }
    })

    function isPointInRect(point, rect) {
        return (
            point.x >= rect.left && point.x <= rect.left + rect.width
            && point.y >= rect.top && point.y <= rect.top + rect.height
        );
    }
</script>
__________________
В личку только с интересными предложениями

Последний раз редактировалось danik.js, 20.10.2014 в 12:59.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40
как скрыть блок div по ключевому слову Sacred13 Элементы интерфейса 6 06.08.2013 19:13
Показать/скрыть блок Lelja_05 jQuery 10 01.07.2013 20:05
Скрыть/показать блок в зависимости от radio MBmusic Элементы интерфейса 10 08.05.2013 17:23
Как определить, что блок скрылся за нижней границей окна? foreach jQuery 12 15.02.2013 20:19