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.