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.

Ejecutando el Arrastre

La función dragGo() va a ser llamada ahora cada vez que se mueva el mouse. Como dragStart(), calcula la posición actual del mouse relativa a la página.

function dragGo(event) {

var x, y;

// Get cursor position with respect to the page.

if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}

Restando las coordenadas iniciales del mouse a las que obtenemos aquí tendremos la  distancia (en pixels) y la dirección en la que se ha movido el mouse tanto horizontal como verticalmente. Añadiendo estas diferencias a la posición inicial del elemento obtendremos la nueva posición del elemento.

  // Move drag element by the same amount the cursor has moved.

dragObj.elNode.style.left =
(dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top =
(dragObj.elStartTop + y - dragObj.cursorStartY) + "px";

Por tanto las propiedades de estilo left y top del elemento se cambian convenientemente, haciendo que el elemento aparente moverse con el puntero del mouse.

La última etapa es detener de nuevo el flujo de eventos y cancelar cualquier acción por defecto para éste.

  if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();

Terminando el Arrastre

Cuando el usuario suelta el botón del mouse,se llama a la función dragStop(). Todo lo que hace esta función es eliminar la captura de los eventos mousemove y mouseup de la página.

function dragStop(event) {

// Stop capturing mousemove and mouseup events.

if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}

Por lo que ahora dragGo() no va a ser llamada como respuesta  a los movimientos del mouse, hasta que un nuevo arrastre sea iniciado.

Conclusión

Ahí lo tienes, un camino simple para añadir interacción de usuario a una página. A pesar de las incompatibilidades de Navegadores - mayormente debidas al modelo de Eventos Propietario de Internet Explorer's  - para las que se ha creado el código necesario, la aproximación es bastante directa.

Previo

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.