http://www.divum.es/ -

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:

    
            01
             
            02
                                "http://www.w3.org/TR/html4/loose.dtd">
        
            03
            <html>
        
            04
            <head>
        
            05
              <style>
        
            06
                .lista {
        
            07
                    background-color:red;
        
            08
                    height: 100px;
        
            09
                }
        
            10
              style>
        
            11
            head>
        
            12
            <body>
        
            13
             
            14
            <ul class="lista" id="listaOrigen">
        
            15
                <li class="item">item 1li>
        
            16
                <li class="item">item 2li>
        
            17
                <li class="item">item 3li>
        
            18
            ul>
        
            19
             
            20
            <ul class="lista" id="listaDestino">
        
            21
            ul>
        
            22
             
            23
            body>
        
            24
            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.

    
            1
            <script src="http://code.jquery.com/jquery-latest.js">script>
        
            2
            <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js">script>
        
            3
            <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js">script>
        
            4
            <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.

1

$(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.

    
            1
            $(".lista").droppable({
        
            2
                            accept: ".item",
        
            3
                            drop:

Ejemplo de Drag & Drop con JQuery