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!).
No veo la hora de que pongan el codigo con php y msql!!! por favor lo necesito!!!
Como qué necesitas gerardo?, damos una idea que se adecue a tus necesidades.
Necesito que me guarde los datos de ordenamiento que hago al realizar el Drag and Drop. Por ejemplo de esta manera puedo llegar a ordenar una tabla de la manero que yo quiera. y Al ingresar otra vez tenga los cambios guardados.
y??? que pasa que no me contesta nadie!!
disculpa! espero terminar un ejemplo con db para el lunes. ok.
Gracias Jesus lo espero con ansias..
Buenas tardes, llevo una semana buscando la forma de utilizar el Edit in Place (ya sea de scriptaculous o otros frameworks) del siguiente modo. Utilizo XHConn.js para hacer includes dinamicos. En la pagina principal tengo definidos campos en los que consigo en efecto Edit in Place de forma sarisfactoria. Pero en el código que integro mediante AJAX de forma dinámica, no consigo ese efecto. He visto que hay gente que utiliza IFRAMES, peró es un poco “chapuza”. Alguien me puede pasar algun ejemplo, o al menos decirme que falla en mi procedimiento, o si al final, no és posible hacerlo de este modo. Gracias!
Hola! está muy bueno este artículo, he estado tratando de hacer algo similar pero la diferencia es que en vez de mover un objeto de una tabla a otra lo pueda mover a cualquier lugar de la página web como si estuviese armando un rompe cabezas, imágenes que está en una BD en MySql, sabes algo de esto?
Hola Gaby! aqui hay un ejemplo de un rompe cabezas (o algo asi) hecho con script.aculo.us http://wiki.script.aculo.us/scriptaculous/page/print/SortableFloatsDemo te refieres a algo asi?
Enhorabuena por el artículo!! es muy interesante.
Me gustaría hacer una pregunta:
¿Es posible hacer que al arrastrar un objeto, en lugar de que se quede su hueco vacio se quedara un recuadro marcando el hueco?
Hola…
Me gustaría saber si es posible en vez de pasar los elemetos de una lista a la otra, se pasen los elementos de una lista a 10 div’s diferentes, sin que se expandan ni dar lugar a un solo elemento más por div.
Gracias.