mover divs con javascript mediante botones

[mensajeescrito]

Hola buenas, veran tengo un problemilla a ver si pueden ayudarme.

Necesito conseguir que varios divs, 3, colocados todos en horizontal en una posicion mas o menos alta en el "top" de la pantalla y que haya un menu de botones (un boton para cada div) en el cual cuando haces un click al boton1 , el div 1 se coloca mas abajo en la pantalla,

cuando se haga click en el boton 2 entonces el div 1 recupere su posicion inicial arriba en el top y baje en su lugar el div 2 , y lo mismo con el 3.


He buscado hasta la saciedad en internet pero solo veo ejemplos de como mediante botones cambiar un solo div en el espacio arriba y abajo a derecha e izquierda sin limite ni tampoco se como añadirles mas divs ni limitar los botones a un solo click.

Os pondre lo que tengo de codigo pero si puedieran ayudarme les estaria muy agradecido.

Gracias de antemano.

Código CSS:

<style type="text/css">
 
#parrafo {position:absolute; top:500px; left:300px; width:200px; height:100px; background-color: #99FFFF}
 
</style>
 

Código Javascript:

<script type="text/javascript">
 
function MoverTexto(id,d){
 
var bloque=document.getElementById(id);
 
var x=(document.defaultView && document.defaultView.getComputedStyle) ?
document.defaultView.getComputedStyle(bloque,'').getPropertyValue("top") :
bloque.currentStyle ? bloque.currentStyle.top : "";
 
 
var y=(document.defaultView && document.defaultView.getComputedStyle) ?
document.defaultView.getComputedStyle(bloque,'').getPropertyValue("left") :
bloque.currentStyle ? bloque.currentStyle.left : "";
 
x= parseInt(x);
 
 
switch(d){
case "arriba": x -=200; break;
case "abajo": x +=200; break;
}
bloque.style.top=x+"px";
 
}
 
</script>
 

Código HTML:

<a href="#" onclick="MoverTexto('parrafo', 'arriba');">Arriba<a/> 
<a href="#" onclick="MoverTexto('parrafo', 'abajo');">Abajo<a/>
 
<div id="parrafo"></div>