How to Save the Order of jQuery UI Sortable Elements in a Database?

Storing Order of jQuery UI Sortable Elements in a Database

Utilizing the jQuery UI sortable function, we can reorder elements and save the new order to a database. Here's a comprehensive example:

The sortable function includes a 'serialize' method that creates an array of elements with their IDs. By making use of this array, we can generate a query string that sends this information to a specified URL when an element's position changes.

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

        // Send data to server using Ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

In the server-side script (e.g., PHP), we can iterate through the received array and update database records accordingly:

$i = 0;

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

This allows us to dynamically update the order of elements both on the client side and in the database, ensuring that changes made by users are persisted.

The above is the detailed content of How to Save the Order of jQuery UI Sortable Elements in a Database?. For more information, please follow other related articles on the PHP Chinese website!