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:

Source code

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

Source code

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

Source code

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

Source code

<?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()