Conceptos de Halar (Drag) y Soltar (Drop)

Los scripts Drag y Drop son enteramente basados alrededor de los eventos de ratón. Esta lección te mostrará paso por paso de como hacer que una capa sea halable. La próxima lección mostrará de como hacer cualquier número de capas halable con un Drag Object genérico.Drag Object. La secuencia de halar y dejar caer es controlada así

Fijando una capa:

Estaré utilizando una capa llamada "cuadro" y definiendo el Dynlayer a este llamado "drag Objet"

<script language="JavaScript">
<!--

function init() {
	dragObject = new DynLayer("square")
	dragObject.dragActive = false
}

//-->
</script>
<style type="text/css">
<!--
#square {position:absolute; left:100px; top:120px; width:50px; height:50px; clip:rect(0px 50px 50px 0px); background-color:blue; layer-background-color:blue;}
-->
</style>
</head>

<body bgcolor="#FFFFFF" onload="init()">

<div id="square"></div>

Note que he aplicado en una propiedad dragActive al DynLayer. Esta propiedad boolean representara si la capa esta en este momento siendo halado.

El Controlado "MouseDown"

La primera etapa en la secuencia de halar 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 halar 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 mouseDown(e) {
	if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true
	var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
	var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
	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 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 mouseMove(e) {
	var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
	var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
	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) .

El Controlador RatonArriba "mouseUp"

Para terminar la secuencia de halar 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 mouseUp(e) {
	var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
	var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
	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 halar.

Ver dragconcepts.html para ver este ejemplo.

Terminar de hacer:

Ahora estamos bien cerca. El único problema en el script es que nunca determinamos cuando activar la secuencia drag y drop. En este momento siempre drag no importa en que lugar de la pantalla cliqueamos. El funcionamiento es que solamente halas la capa cuando hayas cliqueado directamente encima de él. Podrás determinar si has cliqueado en la capa haciendo un chequeo 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
}

Verdragconcepts2.html para ver el ejemplo completo de halar y soltar.

Casa Próxima Lección: Halar Objecto
copyright 1998 Dan Steinman