WebTaller - Aprender DHTML - Conceptos de Arrastrar (Drag) y Soltar (Drop)

Conceptos de Arrastrar (Drag) y Soltar (Drop)

La secuencia de arrastrar y dejar caer es controlada asi:

mouseDown - ver si el raton ha cliqueado sobre una capa, y activar el mouseMove
mouseMove - mueve la capa de manera que coincida con la localizacion del raton.
mouseDown - termina el mouseMove asi finalizando la secuencia de arrastrar
Fijando una capa:
Estarar 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.

El Controlado "MouseDown"
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 raton 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 Netscape de utilizar el evento mouseDown para cualquier otra cosa (incluyendo el Macintosh mouse-hold).

El total controlador mouseDown se asemeja asi

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 "mouseMove"
El Controlador RatonMuevase no hara 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?ueve la capa para el coordinador del raton

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 funcion del mouseMove comenzara a mover la capa. Otra vez nota que en donde esta puesto 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) .

El Controlador RatonArriba "mouseUp"
Para terminar la secuencia de arrastrar lo que necesitas hacer es de fijar la banderilla dragActive para que se devuelta a falso. Esto parar? la funcion OnMouseMove 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.

Contando los valores offset:
Notar?que en ese ejemplo que si la capa es movida directamente a la localizaci??e 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?? corregirla con solo apresar la diferencia entre la localizaci??e la capa, y el coordinador del rat??los valores offset). Esto se hace en la funci??ouseDown:

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

}