Drag Drop con script.aculo.us, PHP y MySQL – Parte 1

Ahora veremos la forma de combinar la característica del drag drop (script.aculo.us) con PHP y MySQL, esto con el objetivo de que los elementos que hemos seleccionado o movido de un lugar a otro se queden guardados en una base de datos.

La aplicación se basará en el ejemplo de drag drop que realizamos días atrás. El artículo relacionado comentó sobre el elemento Sortable y sus opciones para la creación de elementos con drag drop. Pero veremos ahora algunos opciones mas. Empecemos entonces.

Creación de las tablas

Nuestras tablas están relacionadas con la condición del empleado. Vamos a crear dos tablas: contratado y despedido, algo simple para no complicarnos. Cada tabla tendrán sus campos: id, nombre_contratado e id, nombre_despedido, respectivamente. [Ver script SQL]

Y también creamos un script PHP para la conexión a la base de datos.

<?php
   //Configuracion de la conexion a base de datos
   //Cambie estos datos por los suyos
   $bd_host = "localhost";
   $bd_usuario = "root";
   $bd_password = "123456";
   $bd_base = "ribosomatic";
   $con = mysql_connect($bd_host, $bd_usuario, $bd_password);
   mysql_select_db($bd_base, $con);
?>

Ahora vamos por partes

Creamos un archivos index.php y especificamos los archivos del paquetes script.aculo.us que usaremos:

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

Vamos a crear una función en JavaScript para obtener el id de cada contenedor div donde aparecerán los nombres de los empleados contratados y despedidos.

• La variable secciones obtiene todos los contenedores div cuya atributo class sea seccion
• Declaramos una variable de cadena vacia textoprueba
• Revisamos las distintas secciones a través de un bucle y cada iteración la asignamos a una funcion que trabajará con la variable seccion.
• Obtenemos el id de la variable seccion en la variable seccionID.
• Ahora concatenamos esta variable mas todos los elementos de esta seccion, los cuales los obtenemos con el elemento Sortable.sequence(seccion).
• El resultado en un alert será (ej.): seccionAnimales : gato, perro, pato, gallina \n seccionCosas: silla, escritorio, mes

<script type="text/javascript">
 function obtenerElementos() {
  var secciones = document.getElementsByClassName('seccion');
  var textoprueba = '';
  secciones.each(function(seccion) {
   var seccionID = seccion.id;
   textoprueba += seccionID + ': ' + Sortable.sequence(seccion) + '\n';
  });
  alert(textoprueba);
  return false;
 }
</script>

Aqui la estructura de nuestra página web con la lista de empleados contratados y despedidos. Es algo simple, consultamos la relacion de los elementos y mediante un bucle los listamos. Note que cada elemento <div> donde aparecerá los datos, tienen como atributo id el nombre del grupo seguido del nombre del registro, esto con el fin de identificarlos mediante la función obtenerElementos().

<div id="pagina">
 <div id="contratados" class="seccion" style="float:left;width:150px;">
  <h3 class="arrastrar">Contratados</h3>
   <?php
    require('conexion.php');
    $Resultado=mysql_query("SELECT * FROM contratado",$con);
    while($MostrarFila=mysql_fetch_array($Resultado)){
     echo "<div id='empleados_".$MostrarFila['nombre_contratado']."'>".$MostrarFila['nombre_contratado']."</div> \n";
    }
   ?>
 </div>
 <div id="despedidos" class="seccion" style="float:left;width:150px;">
  <h3 class="arrastrar">Despedidos</h3>
   <?php
    $Resultado=mysql_query("SELECT * FROM despedido",$con);
    while($MostrarFila=mysql_fetch_array($Resultado)){
     echo "<div id='despedidos_".$MostrarFila['nombre_despedido']."'>".$MostrarFila['nombre_despedido']."</div>";
    }
   ?>
 </div>
</div>

Ahora la parte en Javascript que permitirá a los elementos de los contenedores contratados y despedidos la característica de drag drop. (De esto encontrará una explicación en el articulo script.aculo.us guía rapida – Parte 3)

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

Finalmente, colocaremos un botón en la parte inferior que llamará en su evento onclick a la función obtenerElementos().

<p align="center">
 <input type="button" name="Button" value="Obtener Elementos de la lista" onclick="obtenerElementos()" />
</p>

Hasta aquí hemos visto como obtener los elementos de los contenedores (div) y mostrarlo en una ventana alert. Ahora lo que falta es guardar estas 2 listas de elementos en las tablas correspondientes de la base de datos. Esto lo veremos en la segunda parte de tutorial.

De momento puede [ver el ejemplo] de esta primera parte.