jQuery UI Sortable e integração de banco de dados

Com jQuery UI Sortable, você pode capacitar os usuários a reorganizar elementos e manter uma ordem específica. Para integrar essa funcionalidade ao seu banco de dados, você pode aproveitar o método serialize em conjunto com AJAX ou envio de formulário.

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

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

Utilizando uma estrutura HTML como:

   

   

   ...

O método serialize gerará uma string de consulta como: item[]=1&item[]=2, onde cada valor representa o ID do elemento reorganizado.

Assumindo seu banco de dados Os IDs correspondem aos IDs dos elementos, você pode então percorrer os dados POSTados e atualizar os registros do banco de dados correspondentes com suas novas posições.

$i = 0;

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

A integração do jQuery UI Sortable com um banco de dados permite manter dinamicamente a ordem dos objetos, fornecendo uma interface amigável para ordenação e persistência.