<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>