Revisión:
El Drag Object es una pieza de código unificada el cual te permitirá selectivamente de hacer Dynamic Layers que pueden ser arrastradas "draggable" con la mínima cantidad de codificación. Lo que es necesitado es de fijar el fichero drag.js, inicializar tus DynLayers, y después añadirlas al drag object.
El objeto arrastrar esta basado alrededor del DynLayer y los Eventos del Ratón DynAPI. Solamente tienes que añadir los DynLayers al Objeto Arrastrar para que estos sean arrastrados, y removerlos del objeto arrastrar para que estos sean de nuevo estáticos.
Los scripts requeridos para hacer esto son:
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="drag.js"></SCRIPT>
Debes de estar seguro de tener el drag.js después del mouseevents.js
El código Drag Object automáticamente iniciará un objeto genérico "drag" el cual es el ausente (default) (no tienes que insertar este código):
drag = new Drag()
Como sea, siendo que este es el objeto tú puedes crear múltiples objetos drag para definir los diferentes grupos de capas arrastrables.
Coordinador de los Eventos del Ratón
Debes de enviar el coordinador de mouse a los Objeto Arrastrar Object is now taken care of by the new DynAPI Mouse Events code. All you have to do is include the mouseevents.js file and call the initMouseEvents() function:
function init() {
// iniciar aquí DynLayers
initMouseEvents()
}
El controlador de los eventos del ratón solamente cuida del default objeto "arrastrar". Si tienes otros objetos para arrastrar debes de incluir una llamada a tu tudrag.mouseDown(x,y), tudrag.mouseMove(x,y),y tudrag.mouseUp(x,y) adentro de cada función DynMouseDown() Move() y Up().
El Drag Object's método add() es lo que tienes que utilizar para hacer tus capas draggable. El uso es bastante simple:
drag.add(dynlayer1, dynlayer2, etc...)
Donde el dynlayer1, dynlayer2, etc... son los nombres de tus DynLayers. El método aceptará cualquier número de DynLayers en una fila, o también puede llamarlas separadamente. En el momento que estas son agregadas estas serán draggable. La siguiente función init() hará cada una de las DynLayers draggable en el momento en que la página termine de cargar:
function init() {
// initialize DynLayers
blue = new DynLayer("blueDiv")
red = new DynLayer("redDiv")
green = new DynLayer("greenDiv")
purple = new DynLayer("purpleDiv")
// agregar las dragable capas al drag object
drag.add(bluered,green,purple)
iniciar mouse events()
}
Eso es todo lo necesario para hacer que tu drag y drop (dejar y caer) trabajen.
Método Remueva() (remove() Method):
Puedes remover un DynLayer del Drag Object, y por lo tanto haces que esta deja de ser arrastrable, con solo utilizar el método remove(). La sintaxis es el mismo del método add():
drag.remove(dynlayer1, dynlayer2, etc...)
Propiedad de recurrir (resort Property):
La propiedad de recurrir determina si la capa que esta siendo halada será puesta encima de todos las otras capas. Por la ausencia (default), cuando cliqueas a una capa draggable el Drag Object hará un z-index de ese capa mas alto que todo el resto. Puede ser que no es lo que deseas, pero puedes devolverlo con solo llamarlo:
drag.resort = false
Método setGrab():
El método setGrab() permite que solo una porción de la capa sea arrastrable, esto permite de hacer barras de herramientas (toolbars) arrastrable, o capas como en windows. (ver DynWindow Object).
drag.setGrab(dynlayer,top,right,bottom,left)
Este método es enteramente opcional, si no lo llamas la capa entera será arrastrable.
Función checkWithin(x,y,left,right,top,bottom) :
Lo mismo como el checkWithin() excepto que solo chequea si x, y, se encuentran adentro de los límites del DynLayer (lyr). Esto solamente puede ser utilizado para DynLayers que son parte del objeto Arrastrar (Drag) ya sea como una capa arrastrar o una capa con un punto de soltar (drop target layer).
Si deseas hacer "algunas cosas" antes de arrastrar una capa, cuando estas arrastrando una capa, o cuando haz terminado de arrastrar una capa, necesitaras de implementar respectivamente los controladores de eventos onDragStart, onDragMove, y onDragEnd.
drag.onDragStart = startHandler drag.onDragMove = moveHandler drag.onDragEnd = endEndler
En tu controlador de funciones puedes utilizar cualquiera de las propiedades del objeto arrastrar para así manipular.
Haciendo los puntos de soltar (Drop Target) te permite fácilmente de determinar si tu capa arrastrada ha sido soltada encima de otra. Por ejemplo si tienes una canasta de compras y deseas soltar alguna cosa encima de la canasta, tienes que hacer una capa con la canasta un punto de soltar (drop target).
Puedes hacer esto con el método addTarget():
drag.addTarget(target1,target2,target3) // target1,2,3 are DynLayers
TAhora para hacer algo cuando una capa arrastrada ha sido soltada en el punto de soltar, debes de implementar el controlador de eventos onDrop:
drag.onDrop = dropHandler
Su tienes múltiples puntos de soltar (Drop Targets). Puedes determinar cual específico punto de soltar ha sido soltado "encima de" con la propiedad: drag.targetHit
function dropHandler() {
if (this.targetHit == target1) alert("you hit target 1")
}
Los valores X y Y probablemente serán los coordinados de una de las funciones del ratón.
Ejemplo: drag1.html [fuente] - jemplo simple de drag (arrastrar)
Ejemplo: drag2.html [fuente] - utliza los eventos onDragStart onDragMove y onDragEnd .
Ejemplo: drag3.html [fuente] - utliza los Drop targets
| Casa | Próxima Lección: Creando y destruyendo Layers |