Cómo conseguir que las capas de HTML se desplacen por pantalla

En muchas ocasiones he tenido que simular el comportamiento de una ventana utilizando una capa. Al conseguir que las capas se desplacen por pantalla, y tengan un aspecto de ventana conseguiremos una simulación mucho mayor.

Para conseguirlo utilizo un código en javascript que modifiqué hace algunos años y que os adjunto al final del artículo.

Para hacer que una capa (o cualquier otro elemento HTML) sea arrastrable por pantalla, simplemente deberás importar la libreria mover-objetos.js, asociarle a cualquier elemento la clase “arrastrable” y añadir un listener al tag body para que al cargar la página se apliquen las propiedades de desplazamientos a los objetos asociados:

<script type="text/javascript" language="javascript" src="mover-objetos.js"></script>
<div id="micapa" class="arrastrable" ></diV>
<script type="text/javascript" language="javascript" 
 if (window.addEventListener){  
        window.addEventListener("load", hacerArrastrables, true);  
     } else if (window.attachEvent){  
       window.attachEvent("onload", hacerArrastrables );
     }
</script>

Como puedes ver el listener se inserta de forma distinta para los navegadores normales que para el navegador Internet Explorer, de ahí las llamadas a window.addEventListener y a window.attachEvent dependiendo del navegador que se utilice.

Para ver el ejemplo simplemente intenta mover la siguiente capa:

Descargar librería