Arrastre Genérico

Autor Original:Mike Hall URL ORIGINAL : http://www.brainjar.com/dhtml/drag/ TÍTULO ORIGINAL : Generic Drag Traducción al castellano:Pedro Palazón Candel URL CASTELLANO : http://kusor.net/traducciones/brainjar.es/drag1.es.html

Arrastre ('Drag') Genérico 

Ver la página demo para la versión final del código.

Este ejemplo de código demuestra como utilizar una combinación de eventos del mouse para convertir cualquier elemento posicionado en una página en un elemento arrastrable por el usuario.

Primero vamos a ver cómo definir elementos en una página para que éstos puedan ser arrastrados, y después veremos cómo trabaja el código.

Configurando Elementos para poderlos Arrastrar

El usuario arrastra un elemento colocando el puntero del mouse sobre él, presionando el botón del mouse y moviendo el puntero mientras se mantiene el botón pulsado. Soltando el botón se finaliza el arrastre.

Obviamente, los eventos mousedown, mousemove y mouseup van a ser utilizados. Y, para que un elemento pueda ser desplazado, debe ser un elemento posicionado. Es decir, debe fijarse en su estilo la propiedad position como absolute, fixed or relative.

Compatibilidad entre Navegadores

Internet Explorer no soporta actualmente elementos posicionados como fixed. Netscape 6.1 si lo hace, pero no es así en su versión 6.0.

Partiendo de que el navegador nos dará la posición del mouse en coordenadas de pixels, las propiedades left y top del estilo del elemento deberían estar definidas también en dichas unidades. Nótese que la posición debe fijarse como estilo 'inline' (o omitidas por lo que tendrán un valor de cero por defecto) y no en una regla de estilo.

Para iniciar un arrastre, un manejador del evento onmousedown necesita haber sido asignado en la etiqueta del elemento para llamar a una función denominada dragStart(). Siguiendo el estándar del modelo de eventos del DOM, el objeto event es pasado como un argumento.

<div style="position:absolute;left:200px;top:100px;"
onmousedown="dragStart(event)">Drag Me</div>

Abajo hay una capa DIV configurada de modo similar al código de ejemplo de arriba. Intenta errastrarla por la página.

Arrástrame

Para hacer el script más funcional, la función dragStart() va a permitir un argumento opcional para especificar el ID de un elemento posicionado. En otras palabras, puedes mover un elemento arrastrando con el mouse algún otro elemento, incluso aunque no esté posicionado. Por ejemplo,

<div id="outerDiv" style="position:relative;left:0px;top:0px;">
<span onmousedown="dragStart(event, 'outerDiv')">Drag Me</span>
<p>Some text.</p>
</div>

Aquí, la etiqueta SPAN conteniendo el texto "Arrástrame" tiene el manejador de eventos configurado para arrastrar su elemento padre, la capa DIV denominada "outerDiv." Debajo está el ejemplo para ilustrar cómo funciona ésto. Trata de arrastrar la capa DIV poniendo el mouse sobre áreas diferentes.

Arrástrame

Algo de texto.

Encontrarás que puedes mover la capa DIV sólamente si el evento 'mousedown' se produce sobre el texto "Arrástrame" y que los contenidos de la capa DIV, incluyendo la etiqueta SPAN, se mueven con ella. La demo muestra algunas posibilidades más.

Nótese también que si solapas los ejemplos anteriores, el elemento que está siendo arrastrado siempre aparece por encima del otro. Esto es porque el script actualiza la propiedad zIndex del estilo del elemento blanco del evento cuando empezamos a arrastrarlo.

Detalles del Código

Ver DOM Event Model para detalles sobre los eventos y compatibilidad entre navegadores.

El código en si mismo es bastante simple en los conceptos. Pero, como es usual, ciertas incompatibilidades entre navegadores necesitan código diferente para que cada navegador diferente cumpla la misma tarea.

Por tanto, en primer lugar, el script define un objeto global llamado browser que contiene información sobre cada navegador particular y su versión. Este objeto se utiliza en el script para acabar con las incompatibilidades entre navegadores.

// Determine browser and version.

function Browser() {

var ua, s, i;

this.isIE = false;
this.isNS = false;
this.version = null;

ua = navigator.userAgent;

s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

// Treat any other "Gecko" browser as NS 6.1.

s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}

var browser = new Browser();

El script podría ser extendido para detectar y trabajar con otros navegadores también, proporcionando éstos soporte de posicionamiento CSS y personalidando los manejadores de eventos para los manejadores de eventos del mouse necesarios.

El siguiente script define un objeto global denominado dragObj. Es simplemente un Objecto genérico de JavaScript que puede ser utilizado para almacenar información durante cualquier operación de arrastre en particular.

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

Una propiedad inicial es predefinida, zIndex que va a ser utilizada para fijar el orden de apiloamiento de ese elemento. Aquí se fija inicialmente a cero pero si cualquier elemento posicionado en la página tiene fijado un zIndex , puede ser cambiado para que tenga el máximo valor utilizado. Esto nos asegurará que el elemento va a ser arrastrado porque aparecerá por encima de cualquier otro.

El resto del script consiste en las funciones usadas para manejar los tres eventos del mouse utilizados en el arrastre.

Siguiente

BrainJar.com · ©1999-2002 by Mike Hall 
Publicado con autorización explícita del autor.
Puedes encontrar más artículos y tutoriales relacionados con dhtml en esta web.