Drag Drop con script.aculo.us

Bien ahora veremos la forma de mover elementos de un lugar a otro con script.aculo.us. Esto será una explicación rápida y al grano. Mas adelante veremos como combinar esta característica con PHP y MySQL.

Primero descargamos el paquete de script.aculo.us y luego incluimos los archivos necesarios para este proceso. Dentro de las etiquetas <head></head> escribimos:

<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>

Para nuestro ejemplo creamos una serie de bloques div con elementos dentro que tendrán la característica de ser ‘arrastrados y soltados’ de un bloque a otro:

<div id="pagina">
<div id="grupo1" class="seccion" style="float:left;width:150px;">
	<h3 class="arrastrar">Animales</h3>
	<div>Gato</div>
	<div>Perro</div>
	<div>Pato</div>
	<div>Gallina</div>
</div>
<div id="grupo2" class="seccion" style="float:left;width:150px;">
	<h3 class="arrastrar">Cosas</h3>
	<div>Mesa</div>
	<div>Escritorio</div>
	<div>Estante</div>
	<div>Silla</div>
</div>
</div>

Como apreciamos, la estructura que hemos creado tienen diversas etiquetas div con su atributo id definido. Podemos apreciar un bloque cuyo id es pagina que contiene a dos bloques: grupo1 y grupo2, cada una de ellas con su atributo class seccion. Además apreciamos que las etiquetas de encebezado h3 tiene el atributo class arrastrar .

Teniendo esa estructura, crearemos un script que permita darle a estos div la característica de poder ser arrastrados y movidos de un lugar a otro, especificamente de un bloque a otro. Para iniciar esta característica usamos esta sintaxís:

Sortable.create('id_del_contenedor',[opciones]);

Donde opciones, son una serie de valores que permite asociarle ciertas caracteristicas a los elementos del contenedor. Puede ver la lista completa en el wiki de script.aculo.us. Pero aquí solo explicaremos algunos que usaremos:

  • tag: (etiquetas HTML) Asigna el tipo de etiqueta (de los elementos dentro del contenedor). Si no se específica por defecto es la etiqueta ‘li’.
  • dropOnEmpty: (true o false) Si es true el contenedor puede recibir elementos de otro contenedor cuando esté vacio.
  • containment: (Array de elementos) Permite ‘arrastrar y soltar’ entre los contenedores especifícados dentro de un array. Ej. [‘contenedor1′,’contenedor2′,’contendor3’].
  • only: (class CSS) Restringe el ‘arrastrar y soltar’ a elementos cuyo atributo class esté especificado aquí. Ej. Si only:’clase’ indica que solo los elementos que tienen el atributo class=’clase’ podrán ser drag drop.
  • constraint: (true o false) Si es true no se nota ningún efecto al ‘arrastrar y soltar’ los elementos.
  • handle: (class CSS) Permite ‘arrastrar y soltar’ a un grupo de elementos.

Veamos entonces como usar estos valores (no usaremos todos) para darle efecto de ‘arrastrar y soltar’ a nuestra estructura HTML. Aqui la idea es permitir que los elementos de los bloques grupo1 y grupo2 pueden ser movidos de un bloque a otro; además, podemos mover todo el bloque de elementos a través de su cabecera <h3>. Luego de nuestra estructura HTML colocamos lo siguiente:

<script type="text/javascript">
 // <![CDATA[
  Sortable.create('grupo1',{
   tag:'div',
   dropOnEmpty: true,
   containment:["grupo1","grupo2"],
   constraint:false});
  Sortable.create('grupo2',{
   tag:'div',
   dropOnEmpty: true,
   containment:["grupo1","grupo2"],
   constraint:false});
  Sortable.create('pagina',{
   tag:'div',
   only:'seccion',
   handle:'arrastrar'});
 // ]]>
</script>

Así de sencillo es trabajar con Drag Drop en script.aculo.us. El código en Javascript es fácil de entender por lo que no supone ningún problema implementarlo para nuestros proyectos web. Mas adelante veremos como combinar esta característica con PHP y MySQL (¡ya se pueden imaginar que cosas se pueden hacer!).

[Ver Ejemplo] [Descargar Ejemplo]