Определить, перекрыт ли блок.
Приветствую.
Возможно ли средствами JS определить, перекрывается блок А блоком B? К примеру, я использую позиционирование и у меня имеется 10 блоков, блоки перекрывают друг друга не полностью. Так вот, можно ли при наведении мыши на тот или иной блок определить перекрыть он другим или нет? |
Блоки прямоугольные?
Если хотя бы одна из вершин находится внутри другого блока, значит перекрывают. |
BETEPAH,
Да, прямоугольные. А как определить, что одна из вершин находится внутри другого блока? |
zhurchik,
по координатам, вестимо. Если у нас есть прямоугольник с вершинами TopLeft, TopRight, BottomLeft, BottomRight, проверяем входит ли в него точка Point: (Point.x > TopLeft.x && Point.x < TopRight.x && Point.y > TopLeft.y && Point.y < BottomLeft.y) |
<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>
|
| Часовой пояс GMT +3, время: 13:58. |