Posts Tagged 'soltar'

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.


Add to Technorati Favorites
Clicky Web Analytics Clicky

Flickr Photos