jQuery UI: shortable

Introducción a la utilidad shortable de jQueryUI, que sirve para reordenar elementos mediante drag and drop.

picasso

archivado en: JavaScript / 27 octubre, 2013

jQuery UI es una librería que facilita incluir en una web diversas utilidades que mejoran la experiencia de usuario, como el calendario datepiquer para la selección de fechas. Hay quien dice que es demasiado pesada para lo que aporta, pero a mí me parece que algunas cosas están fenomenal, sobre todo las relacionadas con el drag and drop, que hacerlo a pelo para que funcione en todos los dispositivos es muy pesado.

Uno de los widgets que más he usado es shortable, que sirve para reordenar elementos mediante d&d. Su mecanismo es sencillo. En el documento se maqueta cualquier conjunto de elementos que sean hijos de un padre, por ejemplo, una lista de hijos <li> cuyo padre es un <ul>, o unos divs que sean hijos de otros divs... da igual la etiqueta. Lo único importante es que los elementos a ordenar sean hermanos.

<padre id="idUnico">

<hijo>Soy un item a ordenar</hijo>

<hijo>Soy otro item a ordenar</hijo>

</padre>

Luego, en su modo más sencillo, basta con especificar el id del padre en el selector de la función shortable.

<script>

$(function() {

$( "#idUnico" ).sortable();

$( "#idUnico" ).disableSelection();

});
</script>

A partir de ahí, uno ya puede complicarse la vida  mejorar la experiencia de usuario definiendo diversas opciones, como el estilo que tendrá el elemento temporal que sirve para mostrar donde arrastrar el elemento que se está moviendo, que por defecto es el mismo salvo que se indique lo contrario en placeholder.

$('#idUnico').sortable({

placeholder:"miEstilo"

}); //#sortable

No voy a repetir aquí las opciones, pues vienen bien explicadas en la documentación de la librería, pero sí es interesante ver qué podemos hacer con PHP con los elementos así ordenados.

Lo normal es que guardemos el orden de los elementos en alguna tabla (en un campo INT), que luego nos servirá para hacer un ORDER BY. Para eso podemos indicar los ids de cada ítem (de la tabla MySQL) cuando los recorremos con PHP. Luego en la función sortable indicamos que al hacer update se serialicen con toArray y ya se envíen por AJAX o como sea al controlador para trabajarlos.

Por ejemplo, en una página tengo esto en el script.

$('#tablaMover').sortable({

placeholder:"ui-state-highlight",

update : function () {

var ordenElementos = $(this).sortable("toArray").toString();

$.post(url_prefix+'ordenarUnidades.html',{idUnidad:idUnidad, order:ordenElementos} , function(data) {

cadena = "<div style='margin:0.3em;'>Orden actualizado.</div>";

$("el selector que sea").html(cadena);

}); //#Post

} //#Update

}); //#sortable

Y luego ya en el controlador (es Codeigniter) recorro el array indicando el orden con un contador.

public function ordenarUnidades() {

//... código que no viene al caso por aquí

$contador = 1;

foreach ( $orden as $clave ) {

$idUnidad = str_replace('listItems_','',$clave);

$this->nld_libreria->updateOrdenUnidades($idUnidad, $contador);

$contador++;

}

//... código que no viene al caso por aquí

}

|| Tags: , ,

valoración de los lectores sobre jQuery UI: shortable

  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 1 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.