Crysfel’s Blog

El tutorial del día de hoy consta de realizar una lista de imágenes sorteable, en otras palabras, voy a mostrar como poder ordenar una lista de imágenes, con mootools esto es extremadamente sencillo, a continuación se muestra un ejemplo del tutorial terminado.

Que de beneficio tiene esto, pues imagínate que tienes en tu base de datos imágenes de productos de una tienda de aparatos electrónicos, y para cada aparato tienes una serie de imágenes, las cuales deben tener un orden, si las fuiste metiendo en orden pues que padre no, pero ¿que sucede si te equivocas? O si quieres que los usuarios mismos puedan elegir el orden en que aparezcan las imágenes, fácil, creas un campo en la tabla de imágenes donde introduzcas el orden de las imágenes, haces un Query trayéndolas ordenadas ascendentemente por medio de ese campo, pero para que los usuarios las ordenes debes ponerles una interfase fácil, pues si les pones una cajita y que ellos mismos introduzcan el numero de orden, para cada imagen, ¡imagínate! Muchos errores se ocasionaría, para estos casos es que es útil esta interfase, y a continuación muestro como hacerla.

Primero bajamos la librería de moootols, donde únicamente seleccionamos en la sección de plugins, la clase Sortables inmediatamente se seleccionan automáticamente todas sus dependencias, luego descargamos el archivo.

Lo importas a tu documento

Ahora lo siguiente es crear la lista de los elementos a ordenar, la cual puede quedar de la siguiente manera.

Ahora se crea una instancia de la clase Sortable pasándole como parámetro la lista que se quiere ordenar, esto quedaría de la siguiente manera.

Con esa simple instrucción ya se puede comenzar a ordenar la lista dando clic sobre el elemento y desplazándolo hacia arriba o debajo de la lista.

Ahora, lo siguiente es poder obtener los valores de la lista resultante después de la ordenación, para eso hacemos una función y la invocamos en el lugar donde necesitemos saber dicho dato.

El método serialize se encarga de regresarnos un arreglo de cómo es que se encuentran ordenados los ítems, en un principio automáticamente enumera los ítems de 0-n, en forma ascendente, al ejecutar este método regresa el estado actual de los índices.

Ahora mostrare otro ejemplo, el de imágenes, y tomando en cuenta el ID proveniente de una base de datos y de esta manera recoger los IDs en el orden que se hallan modificado por el usuario, para esto usaremos la siguiente lista.

Si te has dado cuenta le he agregado un ID a cada <li> de la lista a ordenar, como valor le he puesto id_n donde n es el id de la imagen en la base de datos, es importante mencionar que es necesario ponerle un prefijo al numero id de la base de datos, esto por que no podemos declarar un ID en XHTML de tipo numérico, forzosamente tiene que ser una palabra, con esto en mente se crea la instancia de la clase Sortable para esta lista.

El siguiente paso es crear la función que regresara el arreglo de IDs después de cada ordenación que se haga, para esto usaremos el mismo método que se utilizo anteriormente, solo que con una pequeña diferencia.

La única diferencia es que se le esta pasando como parámetro una función, la cual remplazara a la función default, con esta función nosotros tomamos el ID de cada elemento y le quitamos el prefijo, regresando así solo el ID correspondiente de cada imagen con la base de datos.

Pues si, eso ha sido todo, ¿fácil verdad? Bueno, lo siguiente seria enviar mediante AJAX la lista ordenada al servidor y guardarla en la base de datos, para utilizar AJAX te sugiero leer Peticiones Post con Ajax en este mismo blog.

Aquí esta el código completo de este tutorial.

Hasta la próxima!