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.

 

Acerca del autor:

Mi nombre es Jorge Villalobos, soy Colombiano de nacimiento y resido en México desde 2005,actualmente soy el creador de codigoprogramacion.com Soy ingeniero en tecnologías de información y comunicaciones y trabajo de tiempo completo desarrollando aplicaciones web. En general me considero un tipo normal, me gusta salir, divertirme, y uno de mis hobbies es programar y hacer tutoriales para compartir conocimiento, me gusta la pizza, el ajedrez y tomar una que otra cerveza los fines de semana. Espero que este proyecto ayude a ayudar a los demás.

Twitter del autor:

6 comments

  1. おいしいかにを食べたい方、たくさん買いたい方は、通信販売に挑戦してみればみんな笑顔になれる近道です。初めて生鮮食品をお取り寄せで買ったため、本当にテレビで見た商品が届くのか心配していましたが、届いたかにを料理してみると、ちゃんと身が詰まったかにばかりでした。

    通販でも冷凍だけでなく、生のかにをおいしい状態で買えるようになったので、かにがおいしいシーズンになったら少々時間はかかりますが、店舗に行くよりもなじみのかに通販をいつも利用しています。シーズン前から、かに特集の放映日時をチェックしておきましょう。

    近年では、かに通販のカタログやサイトをよく見ると、丸ごとのかにに加えてポーションが案外目立ちます。殻をむき、中身を取り出したと考えてください。むき身のかにだといえます。

  2. They are a very good way to promote business service.
    Today, lots of websites and blogs bring in unheard of income for their owners merely by promoting another’s company on their web pages.
    To report stolen email addresses at Yahoo, click Yahoo.

  3. When some one searches for his essential thing, so he/she desires to be available that in detail, thus
    that thing is maintained over here.

  4. This pokst gives clear idea in favor of the new people of blogging, that truly how to do blogging.

  5. muy buen articulo pero siento que se quedo un poco corto para un ejemplo basico esta excelente seria bueno indicar si ya se colocaron las instruccion start y stop mas omenos ver como se pueden manipular como cual es su potencial.

  6. There’s definately a great deal to find out about this issue. I like all of the points you’ve made.

Leave a Reply

Your email address will not be published. Required fields are marked *