jQuery UI Sortable e integración de bases de datos

Con jQuery UI Sortable, puedes permitir a los usuarios reorganizar elementos y mantener un orden específico. Para integrar esta funcionalidad con su base de datos, puede aprovechar el método de serialización junto con AJAX o el envío de formularios.

$('#sortable').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

Utilizando una estructura HTML como:

   

   

   ...

El método serializar generará una cadena de consulta como: item[]=1&item[]=2, donde cada valor representa el ID del elemento reorganizado.

Asumiendo su base de datos Los ID coinciden con los ID de los elementos, luego puede recorrer los datos publicados y actualizar los registros de la base de datos correspondientes con sus nuevas posiciones.

$i = 0;

foreach ($_POST['item'] as $value) {
    $query = "UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value";
    // Execute the query
    $i  ;
}

La integración de jQuery UI Sortable con una base de datos le permite mantener dinámicamente el orden de los objetos, proporcionando una interfaz fácil de usar para realizar pedidos y persistencia.