Los scripts Drag y Drop son enteramente basados alrededor de los eventos de ratón. Estaré utilizando el código Eventos del Ratón DynAPI, así que si no haz leído esta lección, léela para que entiendas de lo que estoy hablando. La próxima lección mostrará de como hacer cualquier número de capas arrastrable con un Drag Object genérico.Drag Object. La secuencia de arrastrar y dejar caer es controlada así:
Estaré utilizando una 50x50px capa llamada "cuadro" y definiendo el Dynlayer a este llamado "drag Objet"
function init() {
dragObject = new DynLayer("square")
dragObject.dragActive = false
}
Note que he aplicado en una propiedad dragActive al DynLayer. Esta propiedad boolean representara si la capa esta en este momento siendo arrastrado.
La primera etapa en la secuencia de arrastrar 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 arrastrar 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 DynMouseDown(x,y) {
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 DynMouseMove(x,y) {
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 arrastrar 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 DynMouseUp(x,y) {
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 arrastrar.
Ejemplo: dragconcepts.html [ fuente ] para ver este ejemplo.
Notarás que en ese ejemplo que si la capa es movida directamente a la localización de la capa no se ve bien. La capa se mete en la orilla sin importar a donde se ha sido cliqueada. Podemos contar con esta situación y corregirla con solo apresar la diferencia entre la localización de la capa, y el coordinador del ratón (los valores offset). Esto se hace 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
}
Ejemplo: dragconcepts2.html [fuente] - para ver el ejemplo completo de arrastrar y soltar.
| Casa | Próxima Lección: Arrastrar Objecto |