Elemento sortable en jQuery
jQuery cuenta con la posibilidad de dar propiedades de ordenación a los elementos contenidos dentro de un contenedor. Para poder hacer uso de esta característica necesitaremos incluir las librerías auxiliares de jquery: ui.core.js y ui.sortable.js. También podemos incluir un archivo completo con todas las funciones de jquery-ui (jquery user interface) jquery-ui.js. Recordar que además de incluir las librerías de jquery-ui debemos insertar también la librería jquery.js.
Para ejecutar el método “sortable” (que hace que los elementos hijos de un contenedor sean ordenables) sobre un elemento lo hacemos de forma habitual en jQuery:
$("#divObjetivo).sortable({options})
Dentro de este método las opciones más comunes son:
- stop:función = ejecutara la función especificada cuando se haya parado la ordenación. Se pasaran como parámetros en esta función el evento (event) y el objeto ui. En ui.item referenciaremos el elemento ordenado.
- toArray = Nos devolverá un array con los ids de los elementos que se encuentren dentro del div con propiedad sortable en el orden actual.
En el siguiente ejemplo, tendremos un contenedor de tipo “div” que contendrá elementos hijos también de tipo “div”. Haremos que los hijos puedan ser ordenados clickando y arrastrándolos dentro del cotenedor. Cada vez que cambiemos de posición los elementos hijos se mostrará cual se ha modificado haciendo uso de callback asociado al evento “stop”. Por otro lado si pulsamos en el boton “ORDEN” nos mostrará el orden actual de los hijos (con la opción “toArray”). Esta funcionalidad es muy útil a la hora de guardar las preferencias de orden en una web (por ejemplo el orden en el que aparecerán los libros en la portada de una tienda libros). Esto último se podría hacer asociando al evento “stop” una llamada AJAX que enviará al servidor la información sobre el orden actual (que lo podemos saber haciendo uso de la opción “toArray”).
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.sortable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// damos la propiedad "sortable" al elemento con
// id 'sortable' y actualizamos el
// elemento 'ultimo' con el valor del ultimo
// elemento ordenado.
$("#sortable").sortable({
stop: function (e,ui){$('#ultimo').html(ui.item.html());
}});
});
function orden()
{
// mostramos un array con la ordenacion actual
alert($("#sortable").sortable('toArray'));
}
</script>
</head>
<body>
<div id="sortable">
<div id="1" style="width:300px;
height:50px; background-color:#CCCCCC;
border: 2px solid #000000">1</div>
<div id="2" style="width:300px;
height:50px; background-color:#CCCCCC;
border: 2px solid #000000">2</div>
<div id="3" style="width:300px;
height:50px; background-color:#CCCCCC;
border: 2px solid #000000">3</div>
<div id="4" style="width:300px;
height:50px; background-color:#CCCCCC;
border: 2px solid #000000">4</div>
</div>
<br>
<button onClick="orden()">ORDEN</button>
<span> Ultimo ordenado: </span>
<span id="ultimo">-</span>
</body>
</html>
El resultado sería el siguiente:
