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.
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;"
>
Abajo hay una capa DIV configurada de modo similar al código de ejemplo de arriba. Intenta errastrarla por la página.
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> <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.
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