Ejemplo de Drag & Drop con JQuery

En el mundo javascript existe un antes y un después a las librerías tipo JQuery. Sinceramente, no se como he podido vivir sin ellas hasta ahora.
Voy a realizar un ejemplo sencillo, aunque bastante impresionante por usar eventos drag & drop, para demostrar la potencia del bicho a l@s no iniciad@s.

Ingredientes:

  • Dos listas
  • Items en cada lista😉
  • Un botón para mostrar los datos de cada lista
  • JQuery

Objetivo: Arrastrar items de una lista a otra y mostrar la información que existe en cada una al pulsar un botón.

Primero creo un html sencillo con 2 listas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>
  	.lista {
  		background-color:red;
  		height: 100px;
	}
  </style> 
</head>  
<body>
  
<ul class="lista" id="listaOrigen">
	<li class="item">item 1</li>
	<li class="item">item 2</li>
	<li class="item">item 3</li>
</ul>


<ul class="lista" id="listaDestino">
</ul>

</body>
</html>

Añado al head las referencias a los ficheros de JQuery. En este caso me hace falta el ui.core.js el ui.draggable.js y el ui.droppable.js además del mínimo para que funcione JQuery.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.droppable.js"></script>

*Nota: En el ejemplo uso rutas absolutas, en un entorno de producción sería conveniente descargar los ficheros y usar rutas relativas.

El siguiente paso sería hacer cada uno de los elementos cuyo class sea “item” arrastrables. Para ello añado el siguiente javascript también en la cabecera. La propiedad helper a clone indica que sea un clon del objeto a arrastrar el que se arrastre y que el original se mantenga en su sitio hasta soltarlo sobre su objetivo.

<script>
$(document).ready(function(){
   $(".item").draggable({helper: 'clone'});
});
</script>

$(document).ready(function() indica que se lance el script al cargar el documento (similar al onload).

Una vez hecho esto ya se pueden arrastrar los items. Ahora tengo que definir los destinos (droppables) que en este caso serán las dos listas dado que su atributo class es lista.
La propiedad accept indica el tipo de objeto que acepta sea arrastrado sobre el. La propiedad drop define una función que se ejecutará al soltar un objeto draggable del tipo definido en el accept. Esta función añade al objeto droppable “$(this).append($(ui.draggable))” el objeto arrastrado sobre el.

$(".lista").droppable({				
				accept: ".item",				
				drop: function(ev, ui) {									
					// Añado el objeto origen a la lista destino									
					$(this).append($(ui.draggable));					
				}
			});

Ya puedo mover objetos de una lista a otra. El siguiente paso es crear un botón que muestre los items contenidos de cada lista cuando se haga click sobre el.

Creo el botón en html…

<input type="button" id="botonResultado" value="ver datos">

… y añado una acción al evento onclick del botón que recorre los elementos li de las listas y extrae su contenido con la función html().

$("#botonResultado").click(function () {  
 var salida = "";
 $('.lista li').each(function () {
   salida += $(this).parent().attr('id') + " : " + $(this).html() + "\n";
 });
				
alert(salida);
});

*NOTA: También dentro de la función $(document).ready)

Como se puede ver, con 4 líneas de código Jquery se pueden hacer cosas chulas.

15 Responses to “Ejemplo de Drag & Drop con JQuery”


  1. 1 Cristian septiembre 1, 2008 a las 22:20

    Para mi también fué un gran hallazgo, ahora estoy luchando pra hacer drag & drop multiple de acuerdo a una lista de checks…
    Se te ocurre como hacer esto???

    Saludos

    Cristian

  2. 2 ana septiembre 24, 2008 a las 15:23

    Hola!!!! Necesito que me ayudes con Drag-Drop con botones command nose como utilizarlos, una vez que suelto el mouse el boton nose queda en donde quiero… por favor ayudeme lo necesito urgente!

  3. 3 palotex marzo 2, 2009 a las 04:05

    no funciona, solo deja moverlos pero no me los deja en la otra lista ..

    estoy usando la version 1.3.2 ser eso???

  4. 4 Jose marzo 20, 2009 a las 10:29

    A mi me ocurre lo mismo que a Palotex. No deja los elementos en la lista Destino (ni viceversa).

  5. 5 guillermo abril 18, 2009 a las 16:53

    Hace horas vengo cambiando de lugar las cosas, poniendo “class” aqui y alla, cambiando esto y lo otro. Buscando en otras paginas. Y solo me funciona draggable, pero droppable hace un desastre.

    Igual, como recomendacion les digo que esta bueno tipear el texto, y no hacer copy paste porque me han fallado cosas tontas por copiar ‘ así ` : cosas como los acentos matan y uno da vueltas sobre nada.

  6. 6 LeChuckNorris abril 20, 2009 a las 09:09

    He estado echando un vistazo y seguramente no te funcione debido a la versión de jQuery. Cuando me curré el post jQuery andaba por la versión 1.2.6 (http://code.jquery.com/jquery-1.2.6.js). Lo he probado con ella y funciona. Cuando tenga un rato investigaré porque no funciona con la última versión.

  7. 7 Estefano julio 8, 2010 a las 17:52

    No me andaba, hasta que inclui la version 1.2.6 de JQuery.
    Muchisimas gracias!

  8. 8 Lube8uy septiembre 17, 2010 a las 22:28

    Se deben incluir los siguientes javascripts, y en este orden, para que el ejemplo funcione. Estas dependencias las leí en los códigos de draggable y droppable:
    jquery
    jquery-ui.js
    ui.core.js
    ui.widget.js
    ui.mouse.js
    ui.draggable.js
    ui.droppable.js

  9. 9 raul diciembre 9, 2010 a las 21:32

    mucha sgracias, funciona perfectamente con la version 1.2.6, con la nueva no funciona.

  10. 10 Jaime diciembre 10, 2010 a las 19:49

    Es cierto, no funciona en la ultima version, pero es una buena guia de todas formas😉

  11. 11 Dom octubre 7, 2011 a las 16:25

    “K buena honda de ejemplo, HOYGAN, grasias de hantebraso!” :o)
    Ha sido muy útil para hacer un jumpstart de drag&drop con jQuery, gracias.


  1. 1 JQuery CheatSheet Wallpapers « Ubuntu Life Trackback en agosto 30, 2008 a las 00:07
  2. 2 Drag & Drop en HTML5 sobre Firefox 3.5 | aNieto2K Trackback en julio 16, 2009 a las 12:20
  3. 3 Drag & Drop en HTML5 sobre Firefox 3.5 : Blogografia Trackback en julio 16, 2009 a las 13:03
  4. 4 Campus Virtual mmendiola.net » Drag & Drop en HTML5 sobre Firefox 3.5 Trackback en julio 17, 2009 a las 07:43

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




Add to Technorati Favorites
Clicky Web Analytics Clicky

Flickr Photos

Aljibe

luz

C1

C1

Más fotos

A %d blogueros les gusta esto: