Ordenación de imágenes con jQuery

En el proyecto que estoy haciendo para la empresa de estudios de georadar he hecho un apartado de administración en el que he incluído un par de secciones, entre ellas una de imágenes. En ella doy la posibilidad de subir imágenes para que sean mostradas en el frontEnd.

Como se que esta gente me lo acabará pidiendo he hecho que las imágenes puedan ser ordenadas. Y que mejor forma para ordenar una lista de imágenes que utilizar un drag&drop con jQuery.

Buscando por internet he encontrado que la jQuery UI tiene implementada una función que hace esto en una lista desordenada (<ul>), el método sortable(). He buscado un poco más y he encontrado esta página http://jsbin.com/oqani/10 donde se muestra de forma clara como utilizar dicho método.

Al hacer esto, y siguiendo los pasos de la página, se crea un array con los identificadores ordenados (identificadores que previamente he puesto en cada uno de los elementos de la lista). Con lo que simplemente hay que pasarle a php la lista de identificadores y actualizar la base de datos.

Esto último lo he hecho via AJAX ya que me parecía el método más cómodo y limpio de ordenar los identificadores de cada una de las imágenes.

Funciona genial. Si alguien tiene dudas de como implementar todo el sistema ya sabeis.

Act: No lo voy a dar por terminado todavía. Voy a intentar crear un placeholder cuando hago el drag, a ver si me sale.

Act2: No ha sido dificil el tema del placeholder, y queda bastante mejor

2 opiniones en “Ordenación de imágenes con jQuery”

    1. Pues las imágenes las tenia en otro servidor y al no renovar se han ido todas al garete. Pero vamos, mostraba como funcionaba el sortable de jQuery.

      El código en el enlace que he puesto, y el tema del placeholder en las opciones del sortable de jQuery UI

      Pero te los pongo otra vez, que hay que darlo todo bien mascado, que si no no entra. 😀

      http://jsbin.com/oqani/10/edit#javascript,html
      http://jqueryui.com/demos/sortable/#option-placeholder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *