Objeto de halar

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.

Fijando el Script

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.

Funcionalidad Extra

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.

Fuente de Código

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
copyright 1998 Dan Steinman