Los scripts Drag y Drop son enteramente basados alrededor de los eventos de ratón. Esta lección te mostrará paso por paso de como hacer que una capa sea halable. La próxima lección mostrará de como hacer cualquier número de capas halable con un Drag Object genérico.Drag Object. La secuencia de halar y dejar caer es controlada así
Estaré utilizando una capa llamada "cuadro" y definiendo el Dynlayer a este llamado "drag Objet"
<script language="JavaScript"> <!-- function init() { dragObject = new DynLayer("square") dragObject.dragActive = false } //--> </script> <style type="text/css"> <!-- #square {position:absolute; left:100px; top:120px; width:50px; height:50px; clip:rect(0px 50px 50px 0px); background-color:blue; layer-background-color:blue;} --> </style> </head> <body bgcolor="#FFFFFF" onload="init()"> <div id="square"></div>
Note que he aplicado en una propiedad dragActive al DynLayer. Esta propiedad boolean representara si la capa esta en este momento siendo halado.
La primera etapa en la secuencia de halar es de chequear si haz cliqueado en la layer o no. Para hacer esto simplemente tienes que comparar los coordinadores x-y del ratón a los bordes de la capa:
if (x>=dragObject.x && x<=dragObject.x+dragObject.w && y>=dragObject.y && y<=dragObject.y+dragObject.h)
Si en realidad haz cliqueado en la capa comenzaremos actualmente a halar la capa. Todo lo que es necesitado en el mouseDown es de fijar una banderita verdadera dragActive:
if (x>=dragObject.x && x<=dragObject.x+dragObject.w && y>=dragObject.y && y<=dragObject.y+dragObject.h) { dragObject.dragActive = true return false }
Nota que he puesto un return false en el bloc si hemos cliqueado en la capa. Esto parará a Netscape de utilizar el evento mouseDown para cualquier otra cosa (incluyendo el Macintosh mouse-hold).
El total controlador mouseDown se asemeja así:
function mouseDown(e) { if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft var y = (is.ns)? e.pageY : event.y+document.body.scrollTop if (x>=dragObject.x && x<=dragObject.x+dragObject.w && y>=dragObject.y && y<=dragObject.y+dragObject.h) { dragObject.dragActive = true return false } else return true }
El Controlador RatonMuevase no hará nada a la capa, pero al mandar una banderilla "true" al dragActive tendremos una forma de "activar" el evento RatonMuevase. El evento RatonMuevase simplemente chequea si el la banderilla es "true", si es así mueve la capa para el coordinador del ratón:
function mouseMove(e) { var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft var y = (is.ns)? e.pageY : event.y+document.body.scrollTop if (dragObject.dragActive) { dragObject.moveTo(x,y) return false } else return true }
En el momento que el dragActive es fijado a "true" la función del mouseMove comenzara a mover la capa. Otra vez nota que en donde esta puesto él return false, es muy importante. Cuando estamos halando la capa alrededor no queremos que Netscape utilice el evento mouseMove para otra cosa (como seleccionar texto) .
Para terminar la secuencia de halar lo que necesitas hacer es de fijar la banderilla dragActive para que se devuelta a falso. Esto parará a la función mouseMove de mover la capa:
function mouseUp(e) { var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft var y = (is.ns)? e.pageY : event.y+document.body.scrollTop dragObject.dragActive = false return true }
En este caso no es necesario que se devuelva a falso. No importa si Netscape controla el evento mouseUp mas, porque hemos parado ya la secuencia de halar.
Ver dragconcepts.html para ver este ejemplo.
Ahora estamos bien cerca. El único problema en el script es que nunca determinamos cuando activar la secuencia drag y drop. En este momento siempre drag no importa en que lugar de la pantalla cliqueamos. El funcionamiento es que solamente halas la capa cuando hayas cliqueado directamente encima de él. Podrás determinar si has cliqueado en la capa haciendo un chequeo en la función mouseDown.
if (x>=dragObject.x && x<=dragObject.x+dragObject.w && y>=dragObject.y && y<=dragObject.y+dragObject.h) { dragObject.dragOffsetX = x-dragObject.x dragObject.dragOffsetY = y-dragObject.y dragObject.dragActive = true return false }
Agregando en las propiedades dragOffsetX y el dragOffsetY hemos capturado los valores offset y podremos utilizarlos con el controlador de mouseMove para mover una capa de acuerdo:
if (dragObject.dragActive) { dragObject.moveTo(x-dragObject.dragOffsetX,y-dragObject.dragOffsetY) return false }
Verdragconcepts2.html para ver el ejemplo completo de halar y soltar.
Casa | Próxima Lección: Halar Objecto |