Ordenar elementos mediante Drag & Drop

Tips & tricks – Ordenar listas mediante Drag & drop

3 abril, 2016 0 comentarios

Desde Kadum Desarrollo Web agradecemos los mensajes de felicitación que recibimos y también los referentes a preguntas relacionadas con la programación web. En este tips & tricks vamos a dar respuesta a tres dudas que nos habéis planteado referentes a cómo hacer listas ordenables y trabajar con ellas mediante drag and drop (arrastrar y soltar).

Supuesto práctico

Partimos de una lista con diversos elementos, por ejemplo, las distintas provincias de Andalucía, y queremos permitir al usuario ordenar a su antojo sus elementos arrastrándolos con el ratón hasta una nueva posición.

Lista drag and drop

Lista drag and drop

Para llevar a cabo la programación de una sortable list, nos hemos decantado por usar jquery-ui debido a su simplicidad. En el siguiente enlace podrás leer sobre la API de jQuery-ui http://api.jqueryui.com/sortable/
La filosofía del siguiente código es:

  • Añadir los ficheros js necesarios (jQuery, jQuery-ui)
  • Añadir estilos en línea para hacer más atractiva la lista.
  • Crear una lista con el id milista.
  • Mediante jQuery, una vez que la página está cargada, llamar a la función sortable aplicada a la lista con id milista.
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;" charset="utf-8">
        <title>Lista ordenable mediante drag and drop</title>
        <!-- añadir jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
        <!-- añadir jQuery-UI -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    
        <!-- estilos para la lista -->
        <style>
            ol{
                border:1px solid #ccc;
                margin:0;
                padding:0;
            }
            ol li{
                cursor: pointer;
                display: block;
                margin: 5px;
                padding: 5px;
                border: 1px solid #CCC;
                color: orange;
                background: #EEE;
            }
        </style>
    </head>
    
    <body>
        <!-- Crear una lista con id="milista" -->
        <ol id="milista">
            <li >Almería</li>
            <li >Cádiz</li>
            <li >Córdoba</li>
            <li >Granada</li>
            <li >Huelva</li>
            <li >Jaén</li>
            <li >Málaga</li>
            <li >Sevilla</li>
        </ol>
        
        <script>
            $(document).ready(function(){
                //Aplicar la función sortable a la lista con id milista
                $( "#milista" ).sortable({});
            });
        </script>
    </body>
</html>

De esta sencilla forma, permitimos que el usuario arrastre cualquier elemento de la lista y lo coloque en una nueva posición. Por ejemplo, podrá pulsar sobre Córdoba y arrastrarla al principio de la lista.

La función sortable se podría aplicar también a una tabla, de modo que se podrían ordenar sus filas arrastrando y soltando.

Por ejemplo, tenemos una tabla donde se muestran ordenadas por orden alfabético las provincias con su superficie en km2. Mediante una tabla sortable podemos permitir que el usuario arrastre las provincias y las pueda ordenar a su antojo, colocando, por ejemplo, primero a Sevilla, luego a Córdoba

Tabla drag and drop

Tabla drag and drop

Para ello, se debería construir una tabla con id, por ejemplo, mitabla.

<table id="mitabla" class="table">
    <thead><tr><th>Provincia</th><th>Superficie</th></tr></thead>
    <tbody>
        <tr><td>Almería</td><td>8.774</td></tr>
        <tr><td>Cádiz</td><td>7.435</td></tr>
        <tr><td>Córdoba</td><td>13.769</td></tr>
        <tr><td>Granada</td><td>12.635</td></tr>
        <tr><td>Huelva</td><td>10.128</td></tr>
        <tr><td>Jaén</td><td>13.496</td></tr>
        <tr><td>Málaga</td><td>7.308</td></tr>
        <tr><td>Sevilla</td><td>14.036</td></tr>
    </tbody>
</table>

La función sortable, se deberá aplicar no a la tabla completa, sino al tbody:

<script>
    $(document).ready(function(){
        $("#mitabla tbody").sortable();
    });
</script>

Analizando la API, encontramos distintas opciones de configuración. Se podría:

  • Realizar alguna función tras arrastrar los elementos, usando el evento update o stop
  • Controlar sobre qué parte del elemento/fila se puede hacer drag & drop, usando la opción handle
  • Arrastrar elementos entre diferentes listas ordenables, usando la opción connectWith

En el siguiente tips & tricks haremos uso de algunos de estos aspectos de configuración. De modo que se almacene el nuevo orden de la lista en una tabla de la base de datos. Ahora, nos centramos en la opción connectWith.

sortable-drag-drop-entre-listas

Drag & drop entre listas

Podemos construir dos listas con id diferentes, en nuestro caso: visitadas y pendientes. Permitimos que se arrastren elementos entre las dos listas mediante el código connectWith : ‘#id-de-la-otra-lista’

<script>
    $(document).ready(function(){
        //Aplicar la función sortable a la lista con id visitadas
        // y conectarla con la lista de id pendientes
        $( "#visitadas" ).sortable({
            connectWith : '#pendientes'
        });

        //Aplicar la función sortable a la lista con id pendientes
        // y conectarla con la lista de id visitadas
        $( "#pendientes" ).sortable({
            connectWith : '#visitadas'
        });
    });
</script>

El código fuente completo de este ejemplo de lista ordenable, donde además se hace uso de Bootstrap, podrás descargarlo haciendo click en el icono de Me gusta. De este modo, también podrás seguir las últimas novedades de Kadum desarrollo web en su sitio de Facebook.


Por favor, pulsa el botón Me gusta de facebook para hacerte seguidor de KadumWeb y poder acceder a los archivos descargables

Gracias por hacerte seguidor, pulsa aquí para acceder a los archivos descargables. Descomprime el archivo con la clave: kadumdrag




Volver al blog

Deja un comentario