jQuery UIソート可能、次にデータベースに順序を書き込む

jQuery UI sortable 機能には、serializeが含まれます メソッド これをする。とても簡単です。要素の位置が変わるとすぐに、指定されたURLにデータを送信する簡単な例を次に示します。

$('#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'
        });
    }
});

これは、要素idを使用して要素の配列を作成することです。 。だから、私は通常次のようなことをします：

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

serializeを使用する場合 オプションの場合、次のようなPOSTクエリ文字列が作成されます：item[]=1&item[]=2 たとえば、idのデータベースIDを使用する場合 属性を使用すると、POSTされた配列を繰り返し処理し、それに応じて要素の位置を更新できます。

たとえば、PHPの場合：

$i = 0;

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

jsFiddleの例。