vtnDrag01
Introducción
Continuando con ejemplos sencillos de MooTools presento mis experiencias con el manejo de ventanas. Como siempre, se destaca por su simpleza, libertad de construcción y potencialidad.
Al terminar de digerir este artículo deberías poder implementar sin ningún tipo de problema esta linda ventanita
Simple, MUY SIMPLE
Este primer ejemplo demuestra lo fácil que resulta implementar una ventana arrastable con MooTools. Este tipo de comportamiento seguramente es más conocido como draggabled; yo uso en término en castellano.
Veamos primero al código HTML:
<body>
<div id="vtn">
<div id="vtnCabecera">Cabecera</div>
<div class="contenido">
<p>Este es el contenido de la ventana.</p><hr />
<p>Vemos la línea de separación a ver si funciona.</p>
<p>Ahora ponemos el Link de mi Blog.
<a href="http://blog.cabezaderaton.com.ar">Cabeza De Raton</a></p>
</div>
</div>
</body>
Por el pronto vamos a asimilar los conceptos básicos de funcionamiento que son los que a la larga nos harán no dudar en el desarrollo de nuestros scripts.
Diremos que en este caso necesitamos identificar dos áreas de nuestro layout o estructura de la ventana. La zona que contiene toda la ventana y la cabecera que suele ser la zona de donde agarramos la ventana.
Esto lo implementamos mediante los identificadores id=”vtn” y id=”vtnCabecera”.
Nos detenemos en este punto para señalar como accedemos a los elementos de nuestra estructura html y en particular a nuestra ventana. Estamos hablando de DOM; Modelo de Objetos del Documento; tema tratado en miles de artículos de desarrollo web. A los fines prácticos en este ejemplo necesitamos acceder a los elementos de nuestra ventana inspeccionando el html.
Utilizaremos JavaScript puro y también las funciones de manejo de DOM de MooTools. Mi opinión es que cuando el script a desarrollar no requiere demasiadas complicaciones no utilicemos MooTools ni ningún otro frameWork. De todas formas haremos la implementaciones de las dos maneras para aceitarnos con MooTools.
JavaScript dispone de un pequeño compendio de funciones que utilizaremos utilizando el criterio adecuado en función de la complejidad innata de nuestra aplicación.
En este ejemplo usamos getElementById(); que nos brinda un acceso inmediato a un elemento en función del identificador id que le damos como parámetro.
var vtn = document.getElementById('vtn');
De esta manera asignamos a la variable vtn el nodo que tiene el mismo nombre. Con Mootools usamos la función $(). Esta es la doc Oficial.
var vtn = $('vtn);
MooTools es simple. Muy Simple. Comentamos, en realidad, que la mayoría de los frameWorks cuentan con esta función desde hace un buen tiempo.
Y ahora la magia. Una vez que tenemos identificado el elemento para convertir en una ventana arrastable usamos el método makeDraggable(options); método que pertenece a las clases Drag.Move que es una extensión de la clase Drag.Base. Tiene un solo argumento options con al cual podemos configurar el comportamiento de la ventana. La implementación mas sencilla:
vtn.makeDraggable();
Ya está. Tenemos una ventana arrastrable. Sin embargo al punto de agarre de esta ventana es la totalidad de la misma ya que no hemos definido la zona para tal fin. Para esto utilizamos el subparámetro handle del parámetro options de makeDraggable (). Utilizamos una vez más getElementById o $(), como mas nos plazca.
vtn.makeDraggable({handle: vtn.getElementById('vtnCabecera')});
Ahora si. Definimos al div a través de id=”vtnCabecera” como área de agarre de la ventana. Presentamos el código js en su totalidad para aclarar un par de cositas mas:
window.onload = function(){
var vtn = document.getElementById('vtn');
vtn.makeDraggable({handle: vtn.getElementById('vtnCabecera')});
};
Como se puede apreciar el código se encuentra dentro del control de evento upload del objeto windows de JavaScript. La razón de este control se debe a la carga de la página web en nuestro browser. Tenemos que aseguraros al hacer referencia a un nodo mediante getElementById() que el mismo exista; de no ser así javascript intentará en vano encontrarlo y nos producirá error. Entonces, ejecutamos este código solamente cuando el sitio web se haya cargado completamente, o sea, windows.upload().
MooTools dispone de un manejador de evento similar sobre el objeto windows definido como Windows.onDomReady.
Finalmente un poco de css para acomodar el formato mínimo de la ventana.
#vtn {
position: absolute;
width: 200px; height: 300px;
border: 1px solid #555;http://www.google.com.ar/http://www.google.com.ar/
}
/* Cabecera de Ventana */
#vtnCabecera {
background: #CCC;
border-bottom: 1px solid #555;
cursor: move;
}
Finalizando …
Queda poco por decir a esta altura del partido. Pueden ver el script funcionando y utilizarlo como base de experimentación. Este es otro ejemplo agregando un poco más de estilo a la ventana.
Este es el primer paso de una serie de artículos que iremos adosando al tema ventanas con MooTools.
