Ordenar elementos con jQuery Sortable + Ajax

En mi proyecto de final de carrera hará unos cuantos años ya llegué a implementar la función sortable() que nos facilita la interfaz jQuery UI para ordenar un portal de noticias quedando registrado de cara al usuario en linea pero no tuve la posibilidad de explicar como llegué a su implementación.

Recientemente para otro proyecto actual me he visto en la necesidad de buscar un sistema sencillo, eficaz y moderno que ordene elementos. En este caso, el usuario final tan solo tiene que pulsar en los elementos y arrastrarlos hasta el sitio deseado.

En el ejemplo que vamos a ilustrar vamos a tener un listado de ciudades que el usuario va a poder ordenar a su antojo arrastrando los elementos al lugar deseado.

Vamos a utilizar las tecnologías jQuery UI + Ajax. De jQuery UI vamos a utilizar la función sortable() que nos facilita mucho el trabajo del movimiento de elementos. Y con Ajax vamos a actualizar registros.

Lo primero que tendremos que hacer es añadir en nuestra cabecera todas las librerías y estilos que necesitemos:

<link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>

Seguidamente allí donde queramos deberemos añadir los tags HTML + el listado dinámico de elementos (ciudades) sacados de la base de datos.

<ul id="cities" class="sortable">
    <?php
    $query_cities = $conexion->query('SELECT * FROM cities ORDER BY position');
    if ($query_cities->num_rows > 0) {
        while ($row = $query_cities->fetch_assoc()) {
            echo '<li class="ui-state-default" id="city_'.$row['id_city'].'">'.$row['city_name'].'</li>';
        }
    }
    ?>
</ul>

Para entender el funcionamiento es muy importante que te quedes con los identificadores de los contenedores y listas.

Ahora solo queda añadir el código clave del asunto. Lo podemos añadir o en la cabecera o al final de la página, por encima de la etiqueta de cierre del </body>.

<script type="text/javascript">
$(document).ready(function(){
    $('#cities').sortable({
        revert: true,
        opacity: 0.6, 
        cursor: 'move',
        update: function() {
            var order = $('#cities').sortable("serialize")+'&action=orderState';
            $.post("ajax.php", order, function(theResponse){
                $('#success').html('Gracias por ordenar las ciudades!').slideDown('slow').delay(1000).slideUp('slow');
            });
        }
    });
});
</script>

Simplemente estamos llamando a la función sortable() que nos facilita la interfaz jQuery UI con algunos parámetros de los cuales vamos a destacar el parámetro update donde estamos ejecutando una función que captura todos los elementos (li) de la lista de ciudades y seguidamente hacemos una llamada AJAX por POST al archivo ajax.php y como resultado mostramos un mensaje instantaneo de respuesta.

El archivo ajax.php se encarga de actualizar los registros de posición de cada ciudad en la base de datos.

<?php
include('../../config_mysqli.php');
 
foreach($_POST['city'] as $key=>$value) {
    $update = 'UPDATE cities SET position = '.$key.' WHERE id_city ='.$value;
    $conexion->query($update);        
}   
?>

Ver ejemplo en funcionamiento

Ver más sobre la función sortable()

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (8 votos, promedio: 4,88 de 5)
Cargando…
Comparte en las redes sociales

5 respuestas a “Ordenar elementos con jQuery Sortable + Ajax”

  1. Ovalles dice:

    Hola! amigo muy buenos esos tutoriales, tendras el codigo es que me marca algunos errores

  2. german dice:

    Hola, queria saber como hago lo siguiente: en un query que ya tengo armado recibo varios números, pero nunca sabré cuanto son en total ya que depende del momento que se invoque la pagina.
    La idea es a ese listado que recibo armarlo en una tabla de 10 columnas de ancho, y las xxxx que necesite de largo, por supuesto que el ancho será fijo pero el largo será variable dependiendo cuantos registros reciba.
    Muchas gracias.

  3. Paolo dice:

    Muy bueno!! Estimado José, en el souce code donde se encuentra

    Falta que le agregues:

    Saludos

  4. roy dice:

    cual es la estructura de tu base de datos?
    no eres muy bueno explicando.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre