El metodo sortable de jQuery UI, nos hace la vida mas facil cuando queremos convertir esas listas comunes y corrientes en algo que podamos reordenar utilizando un simple drag and drop. Es una forma muy interactiva de manipular el DOM, y su uso es el siguiente.
Uso .sortable() en jquery UI
Seleccionamos una lista como una lista desordenada, ya una vez cargado el dom basta con mandarla a llamar via jQuery y listo solo usamos el metodo .sortable()
JQUERY UI:
$('#lista').sortable();
HTML:
<ul id="lista"> <li>uno</li> <li>dos</li> <li>tres</li> </ul>
En este ejemplo manejamos una lista reordenable una vez cargado el DOM, lo que se hace es ligar 2 listas con la propiedad “connectWith” que nos permite ligar dos listas y hacerlas “reordenables”.
Propiedades y eventos:
.sortable() también cuenta con una serie de parametros para configurar la funcionalidad del mismo, una de las propiedades mas usadas es “connectWith” que se utiliza para conectar 2 o mas listas entre sí y reordanar los elementos de manera que podemos trasladar elementos de una lista a otra.
También cuenta con eventos como “start” y “stop” que te permiten ejecutar codigo mientras sortable esta en ejecución.
Revisa una implementación muy basica en el siguiente ejemplo y video.
Codigo fuente (Solo copia y pega este codigo en un archivo html para ver el ejemplo):
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#sortable,#sortable2").sortable( { connectWith:".s1", start:function(){ //alert("Estas utilizando Drag and Drop"); }, stop:function(){ //alert("Terminando de reorganizar"); } }) ; } ); </script> </head> <body> <ul id="sortable" class="s1"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li>Elemento 4</li> </ul> <ul id="sortable2" class="s1"> <li>Elemento 1s2</li> <li>Elemento 2s2</li> <li>Elemento 3s2</li> <li>Elemento 4s2</li> </ul> </body> </html>
Video tutorial:
En este video te explicaré exactamente como hicimos el ejercicio de arriba.