jQuery UI Sortable, a następnie zapisz kolejność w bazie danych

Interfejs użytkownika jQuery sortable funkcja zawiera serialize metoda aby to zrobić. To naprawdę bardzo proste. Oto krótki przykład, który wysyła dane do określonego adresu URL, gdy tylko element zmieni pozycję.

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

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

To, co robi, to tworzenie tablicy elementów przy użyciu elementów id . Więc zwykle robię coś takiego:

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

Kiedy używasz serialize opcja, utworzy ciąg zapytania POST taki:item[]=1&item[]=2 itp. Więc jeśli użyjesz - na przykład - identyfikatorów bazy danych w id atrybut, możesz po prostu przejść przez tablicę POSTed i odpowiednio zaktualizować pozycje elementów.

Na przykład w PHP:

$i = 0;

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

Przykład jsFiddle.