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
2 – Objetos HTML próximos
3 – Objetos HTML sobrepostos
Por
MSc. Fernando Henrique Inocêncio Borba Ferreira
Microsoft Most Valuable Professional – Visual C#
Fernando Henrique Ferreira 