Drag and drop usando Scriptaculous (1)

Una de las tantas posibilidades de script.aculo.us es el uso de las funciones de Drag and Drop. No es algo que tenga una gran utilidad práctica pero es bastante sencillo de usar.

Para probarlas, debemos seguir el mismo procedimiento que con los efectos; descargar las librerías, alojarlas en un servidor propio y cargarlas en nuestra plantilla. Empecemos con esto ya que es una pregunta repetida y hay varias alternativas.

Si no tenemos nada, debemos de empezar descargando el ZIP que contiene todos los archivos necesarios y luego alojarlos en un servidor propio. Como mínimo, necesitaremos los siguientes scripts:
prototype.js
scriptaculous.js
effects.js
dragdrop.js
el resto son optativos; cada uno de ellos se utiliza para poder implementar funciones especiales (builder.js, controls.js, slider.js, sound.js).

Los agregamos a la plantilla, justo antes de </head>:

<script type="text/javascript" src="URL_prototype.js"></script>
<script type="text/javascript" src="URL_scriptaculous.js?load=effects,dragdrop"></script>

Si ya tenemos alguno de los módulos en uso, por ejemplo porque usamos LightWindow, basta agregar dragdrop.js en la llamada:

<script type="text/javascript" src="URL_scriptaculous.js?load=effects,dragdrop"></script>

Una segunda alternativa si nos queremos ahorrar el trabajo de alojar los archivos es utilizar las librerías de Google. Este es el método más sencillo si se trata de hacer pruebas rápidas ya que basta agregar antes de </head>:

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</script>

De esta manera se cargarán todos los módulos que existan.

Una última posibilidad es usar Protoculous que es una librería comprimida y que en un solo archivo nos permite usar todas las funciones [más información]

Bueno, ahora que ya tenemos los scripts, vamos a ver como funcionan.

Para hacer que un elemento sea "arrastrable" basta crearlo con la clase Draggable e identificarlo utilizando el atributo ID. La sintaxis general es esta:

new Draggable(elemento);

Suena complicado pero no lo es, bastan dos líneas de código; por ejemplo:

<div id="demo"> [ ... el contenido ... ] </div>
<script type="text/javascript"> new Draggable('demo'); </script>

Este es un ejemplo sencillo usando un DIV donde sólo hay un texto:

<div style="text-align: center;font-size:17px;">
La palabra
<span id="demo1" style="color:#FF0000;font-weight:bold;cursor:move;">MOVER</span>
se puede arrastrar.
</div>
<script type="text/javascript">new Draggable('demo1');</script>

<img id="demo2" src="URL_imagen"/>
<script type="text/javascript">new Draggable('demo2');</script>

En todos los casos, basta colocar un script después del elemento pero también podemos agregarle algunas opciones para controlarlo:

<script type="text/javascript">
new Draggable(IDelemento, opciones);
</script>

zindex (por defecto es 1000) indica la propiedad CSS z-index del elemento cuando lo arrastramos; esto hace que aparezca "por encima" de todos los otros elementos de la página; al soltarlo vuelve a tener su valor normal.

constraint es una de las formas en que podemos limitar el desplazamiento y por defecto no está definida. Hay dos posibilidades:

new Draggable('demo', {constraint:"horizontal"} );
new Draggable('demo', {constraint:"vertical"} );

starteffect, endeffect y reverteffect definen funciones que podemos llamar al comenzar a arrastra un elemento o al soltarlo.

new Draggable('demo', {starteffect: unaFuncion('demo')} );
new Draggable('demo', {endeffect: otraFuncion('demo')} );

También hay una serie de funciones predefinidas o eventos (callbacks) que pueden llamarse dentro de las opciones.

onStart se ejecuta cuando comenzamos a arrastar el objeto
onDrag se ejecuta mientras arrastamos el objeto
change se ejecuta cuando cambiamos la posición original del objeto
onEnd se ejecuta cuando soltamos el objeto

Si queremos deshabilitar un elemento, es decir, hacer que ya no sea "arrastrable" y que vuelva a su posición original debemos usar una variable para crearlo y luego, "destruirlo

var unNombre = new Draggable('demo', {revert: true});
.......
unNombre.destroy();

Una forma muy sencilla de limitar los movimientos es colocar los elementos "arrastrables" dentro de un DIV al que le damos propiedades CSS especiales para que todo lo que se salga de él, no se vea:

<div style="border:1px solid #444444; height:250px; overflow:hidden; position:relative;
margin:10px auto; width:450px;">
<img style="cursor:move; position:absolute; left:10px; top:10px;"
id="demoIMG1" src="URL_imagen1" />
<img style="cursor:move; position:absolute; left:390px; top:10px;"
id="demoIMG2" src="URL_imagen2" />
<img style="cursor:move; position:absolute; left:10px; top:190px;"
id="demoIMG3" src="URL_imagen3" />
<img style="cursor:move; position:absolute; left:390px; top:190px;"
id="demoIMG4" src="URL_imagen4" />
</div>
<script type="text/javascript">
new Draggable('demoIMG1');
new Draggable('demoIMG2');
new Draggable('demoIMG3');
new Draggable('demoIMG4');
</script>