Tag Archive for sortable

Reordanar listas con Drag and Drop usando Jquery ui Sortable

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.