Revisión: añadido un método setGrab() el cual hará solamente una porción de la capa atrapable. Esto fue necesario para crear él DynWindow.
El Drag Object es una pieza de código unificada el cual te permitirá selectivamente de hacer Dynamic Layers que pueden ser haladas "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 drag Object generalmente deberá estar dentro de su propio fichero.js el cual puedes incluirlo en cualquiera de las páginas que lo utilice. También debes de incluir el básico Dynamic Layer Object en esos ficheros, ya que el Drag Object puede solamente aceptar DynLayers.
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="drag.js"></SCRIPT>
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 halables.
Debes de enviar el coordinador de mouse a los drag object(s) de cada una de las funciones mouseDown(), mouseMove() and mouseUp(). Aquí te enseñare de como hacerlo:
function init() { // iniciar aquí DynLayers // iniciar mouse events document.onmousedown = mouseDown document.onmousemove = mouseMove document.onmouseup = mouseUp if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) } function mouseDown(e) { if ((ns4 && e.which == 1) || ie4) { var x = (ns4)? e.pageX : event.x var y = (ns4)? e.pageY : event.y+document.body.scrollTop drag.mouseDown(x,y) if (drag.active) { // pon aquí mas código para hacer cualquiera otra cosa mientras comienza un drag return false } else { if (ns4) routeEvent(e) return true } } } function mouseMove(e) { var x = (ns4)? e.pageX : event.x var y = (ns4)? e.pageY : event.y+document.body.scrollTop if (drag.active) { drag.mouseMove(x,y) //pon aquí mas código para hacer cualquiera otra cosa mientras dragging return false } else { if (ns4) routeEvent(e) return true } } function mouseUp(e) { var x = (ns4)? e.pageX : event.x var y = (ns4)? e.pageY : event.y+document.body.scrollTop if (drag.active) { drag.mouseUp() // pon aquí mas código para hacer cualquiera otra cosa mientras termina un drag return false } else { if (ns4) routeEvent(e) return true } }
El próximo paso es para que puedas iniciar tus DynLayers, y agregar esas capas al drag object. 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 document.onmousedown = mouseDown document.onmousemove = mouseMove document.onmouseup = mouseUp if (is.ns) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) }
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 halable, 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 halable, esto permite de hacer barras de herramientas (toolbars) halables, 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á halable.
Función checkWithin() :
La función checkWithin() puede ser utilizada para chequear si un particular coordinador tiene un cierto límite. Esta función es utilizada por el Drag Object para determinar cuando la capa ha sido cliqueada, pero también puede ser utilizada para otras cosas como determinando si tu haz dejado caer el objeto sobre de una área particular de la página.
Para utilizar la función checkWithin() necesitarás un test coordinador ( X y Y) y entonces comparas eso con los otros 4 valores; izquierda, derecha, arriba, abajo (left, right, top, bottom) el cual representa una porción cuadrada de la página:
checkWithin(x,y,left,right,top,bottom)
Los valores X y Y probablemente serán los coordinados de una de las funciones del ratón.
Descargar: drag.js
Ver fuente: drag.js
Ver dragobject1.html para un ejemplo de Drag objeto.
Casa | Próxima Lección: Creando y destruyendo Layers |