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.
Hermoso día... 
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
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!
no funciona, solo deja moverlos pero no me los deja en la otra lista ..
estoy usando la version 1.3.2 ser eso???
A mi me ocurre lo mismo que a Palotex. No deja los elementos en la lista Destino (ni viceversa).
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.
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.
No me andaba, hasta que inclui la version 1.2.6 de JQuery.
Muchisimas gracias!
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
mucha sgracias, funciona perfectamente con la version 1.2.6, con la nueva no funciona.
Es cierto, no funciona en la ultima version, pero es una buena guia de todas formas 😉
«K buena honda de ejemplo, HOYGAN, grasias de hantebraso!» :o)
Ha sido muy útil para hacer un jumpstart de drag&drop con jQuery, gracias.