Показать сообщение отдельно
  #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.
Ответить с цитированием