Introducción

Este ejemplo es continuación directa de vtnDrag01. Posiblemente tendría que haber sido uno solo artículo, pero por cuestiones de tiempo no lo pude publicar todo junto, por lo que recomiendo leer vtnDrag01 antes de continuar con esto.

Le asigné como título vtnDrag05 porque he estado haciendo ejemplos intermedios que no vienen al caso pero que de alguna manera marcan mi versión de trabajo.

Finalidad

Explicamos como acceder a elementos de de nuestra página mediante $(), como limitar la zona de movilidad de la ventana y como cambiar su tamaño.

Al terminar de probar este bocado deberlas poder implementar esta ventanita que lo único que le falta son dos alitas y bailar.

El Layout

Layout de ventana

En al figura adjunta mostramos la estructura de la ventana. Tenemos 4 zonas para identificar las cuales tendrán una función distinta sobre el comportamiento final. Para acceder desde JS a estos nodos utilizamos la función $() de MooTools. que retorna un elemento DOM del árbol total de la página en función del id pasado como argumento.

Por ejemplo, para asignar a una variable de javascript el elemento de id=”vtn” simplemente utilizamos var ventana = $(‘vtn’);.
Presentamos a continuación el código html correspondiente al layout. Oberven los ids de los nodos. Recordemos que un identificador id no puede estar definido dos veces dentro de nuestro documento.

<div id = "contenedor">
    <div id="vtn">
        <div id="vtnCabecera">Cabecera</div>
        <div class="contenido">
            <p>Este es el contenido de la ventana.</p><hr />
            <p>Mi Email <a href="mailto: rdsuarez@gmail.com">rdsuarez@gmail.com</a></p>
            <p>El funcionamiento de este Artículo lo podes encontrar en
            <a href="http://blog.CabezaDeRaton.com.ar">Cabeza de Raton</a></p>
        </div>
        <div id="resize"></div>
    </div>
</div>

Código HTML del Layout de la Ventana

JavaScript y MooTool – Línea a línea

window.onload=function(): Nos aseguramos que cuando hagamos referencia a los ids estos ya se encuentren cargados en el browser. Si no esperamos; puede darse (casi seguro) que hagamos referencia a un elemento que aún no existe.

var vtn = $(‘vtn’);: Asociamos a la variable vtn el elemento con identificador id=”vtn”. Es nuestro ejemplo vtn es un div principal de nuestra ventana.

vtn.makeDraggable: Hacemos este elemento arrastrable.

handle: $(‘vtnCabecera’): Definimos el área cabecera o handle de nuestra ventana. Esta es la zona por donde podrá ser agarrada la ventana. En este ejemplo, vtnCabecera es un identificador de un div que también contiene el título de la ventana.

container: $(‘contenedor’): Esto es nuevo en mi caso. Definimos dentro de las opciones un contenedor del espacio físico de movilidad de la ventana . Muy útil, muy fácil de usar. En este diseño simplemente es un div con id=”contenedor”.

vtn.makeResizable: Otra cosa nueva en este Blog. Hacemos que nuestra ventana sea redimensionable (resizable). Brillante

handle: $(‘resize’): Definimos la zona de redimensión en forma similar a como definimos anteriormente la cabecera de la ventana. En nuestro ejemplo es un div de 10×10 que se posiciona mediante css abajo y a la derecha.

Ahora … todo el código javaScript.

window.onload=function(){
    var vtn = $('vtn');
        vtn.makeDraggable(
            {
                handle: $('vtnCabecera'),
                container: $('contenedor')
            });
        vtn.makeResizable({handle: $('resize')});
    }

JavaScript y MooTools para nuestra ventana

Finalizando

Un poco de código css para acomodar las cosas y no mucho más para decir. Este es el ejemplo terminado. Listo el Pollo. A practicar, experimentar y compartir experiencias. Saludos.

#vtn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 220px;
    background: #EEE;
    border: 1px solid #555;
    font: normal 10pt/12pt Verdana;
    }

#vtnCabecera {
    background: #136;
    color: #EEF;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #555;
    padding: 2px;
    cursor: move;
    }

.contenido {
    margin: 5px;
    }

#resize {
    position: absolute;
    bottom: 0px; right: 0px;
    height: 10px; width: 10px;
    background: #555;
    cursor: se-resize;
    }

#contenedor {
    background: #EFE;
    border: 1px solid #ABA;
    width: 500px; height: 400px;
}

Hoja de estilo de nuestra Ventana