Sobreposição de objetos com Javascript

Com o aumento da quantidade de funcionalidades construídas com Javascript novos requisitos surgem a cada dia. Requisitos que antes não eram tão comuns (como a manipulação/movimentação de objetos gráficos em um browser) tornam-se triviais, pois aumentam a usabilidade da aplicação tornando o seu uso fácil, agradável, rápido e de fácil assimilação.

O exemplo abaixo demonstra como é possível identificar a sobreposição de objetos HTML utilizando código Javascript.

Como isso funciona? O algoritmo identifica quando um objeto é sobreposto, alterando sua cor para sinalizar a sobreposição. E assim que o objeto deixa de ser sobreposto sua cor volta ao estado inicial.

Segue o exemplo de uso:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        var defaultJump = 10;

        function goUp() {
            moveDiv('v', -(defaultJump));

            setOverControlColor();
        }

        function goRight() {
            moveDiv('h', defaultJump);

            setOverControlColor();
        }

        function goLeft() {
            moveDiv('h', -(defaultJump));

            setOverControlColor();
        }

        function goDown() {
            moveDiv('v', defaultJump);

            setOverControlColor();
        }

        function setOverControlColor() {

            var target = document.getElementById('divTarget');

            if (isControlOverControl("divController", "divTarget")) {
                target.style.background = "red";
            }
            else {
                target.style.background = "green";
            }
        }

        function moveDiv(direction, pixels) {

            var div = document.getElementById('divController');

            if (direction == 'v') {

                var value = Number(div.style.top.replace("px", ""));
                value = value + pixels;

                if (value < 0)
                    value = 0;

                div.style.top = value + "px";

            } else if (direction == 'h') {

                var value = Number(div.style.left.replace("px", ""));
                value = value + pixels;

                if (value < 0)
                    value = 0;

                div.style.left = value + "px";
            }
        }

        function isControlOverControl(upControl, downControl) {

            var div = document.getElementById(upControl);
            var target = document.getElementById(downControl);

            var startLeft = Number(div.style.left.replace("px", "")) - Number(div.style.borderLeftWidth.replace("px", ""));
            var endLeft = startLeft + Number(div.style.width.replace("px", "")) + Number(target.style.borderRightWidth.replace("px", ""));
            var startTop = Number(div.style.top.replace("px", "")) - Number(target.style.borderTopWidth.replace("px", ""));
            var endTop = startTop + Number(div.style.height.replace("px", "")) + Number(target.style.borderBottomWidth.replace("px", ""));
                        
            var startLeftTarget = Number(target.style.left.replace("px", "")) - Number(target.style.borderLeftWidth.replace("px", ""));
            var endLeftTarget = startLeftTarget + Number(target.style.width.replace("px", "")) + Number(target.style.borderRightWidth.replace("px", ""));
            var startTopTarget = Number(target.style.top.replace("px", "")) - Number(target.style.borderTopWidth.replace("px", ""));
            var endTopTarget = startTopTarget + Number(target.style.height.replace("px", "")) + Number(target.style.borderBottomWidth.replace("px", ""));
                        
            var horizontal = false;
            var vertical = false;

            if ((endTop >= endTopTarget && startTop <= endTopTarget) ||
                (endTop <= endTopTarget && endTop >= startTopTarget))
                vertical = true;

            if ((endLeft >= endLeftTarget && startLeft <= endLeftTarget) ||
                (endLeft <= endLeftTarget && endLeft >= startLeftTarget))
                horizontal = true;

            return vertical & horizontal;
        }

    </script>
</head>
<body>
    <div id="divTarget" style="position:absolute;width:300px; height:300px;background-color:green;border:1px solid black;top:100px;left:200px">

    </div>

    <div id="divController" style="background-color:whitesmoke;position:absolute;width:120px;height:100px;display:block;border:1px solid black;top:320px;left:10px">
        <label>Coordinates</label>
        <table>
            <tr>
                <td><input type="submit" value="Up" onclick="javascript: goUp();" /></td>
                <td><input type="submit" value="Down" onclick="javascript: goDown();" /></td>
            </tr>
            <tr>
                <td><input type="submit" value="Left" onclick="javascript: goLeft();" /></td>
                <td><input type="submit" value="Right" onclick="javascript: goRight();" /></td>
            </tr>
        </table>
    </div>

</body>
</html>

As imagens abaixo detalham o funcionamento do algoritmo:

1 – Objetos HTML sem sobreposição

Objetos distantes

2 – Objetos HTML próximos

Objetos próximos

3 – Objetos HTML sobrepostos

Objetos sobrepostos

Por
MSc. Fernando Henrique Inocêncio Borba Ferreira
Microsoft Most Valuable Professional – Visual C#

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: