Movimentando image dentro de uma determinada área

[jsmoraes]

Neste exemplo buscamos as informações possíveis dos limites da área através dos Id de Divs.
Nem sempre os Divs da página Nabble posuem ID, tornando muito complicado capturar informações.

Considerei o Div id = topic-contents como uma opção bem razoável para identificar os limites de top (coordenada y superior), left (coordenada x lado esquerdo), largura do DIV para cálculo do limite lado esquerdo e altura para limite parte inferior.

O ideal seria subtrair a altura da área de Título da Mensagem. Mas não vi nenhum ID na região para capturar esta informação.

Este código funciona muito bem em mensagens sem reply e sem barra de rolagem à direita.
seu código fonte seria:

<nabble_embed>
<div id="nomedodiv" style="z-index:1;position:absolute;left:40px;top:300px;color:white;width:40px;height:22px;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px">
<img src="http://jsmastronomy.30143.n7.nabble.com/file/n592/anim_drunk.gif"></div>
</nabble_embed>

<script type="text/javascript">

var meudiv = document.getElementById("nomedodiv")
var ballRadiusX = 40;
var ballRadiusY = 11;
var x = 40; // posição inicial do div igual 40
var y = 300; // posição inicial do div igual 300
var dx = 2;
var dy = -2;
var areatopo = document.getElementById('topic-contents');
var ytopolimite = areatopo.offsetTop;
var xleftlimite = areatopo.offsetLeft;
var xrightlimite = areatopo.offsetWidth - (xleftlimite + (ballRadiusX/2));
var ybottomlimite = areatopo.offsetHeight + ytopolimite;

function drawBall() {
meudiv.style.left = x + "px";
meudiv.style.top = y +"px";
}

function draw() {

    drawBall();

    if(x + dx > xrightlimite || x + dx < xleftlimite) {
        dx = -dx;
    }
    if(y + dy > ybottomlimite || y + dy < ytopolimite) {
        dy = -dy;
    }
    
    x += dx;
    y += dy;
}
setInterval(draw, 15);
</script>