jQuery UI Sortable とデータベースの統合

jQuery UI Sortable を使用すると、ユーザーが要素を再配置し、特定の順序を維持できるようになります。この機能をデータベースと統合するには、AJAX またはフォーム送信と組み合わせてシリアル化メソッドを利用できます。

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

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

次のような HTML 構造を利用します:

   

   

   ...

serialize メソッドは、item[]=1&item[]=2 のようなクエリ文字列を生成します。各値は再配置された要素の ID を表します。

データベースを想定しています。 ID が要素 ID と一致すると、POST されたデータをループして、対応するデータベース レコードを新しい位置で更新できます。

$i = 0;

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

jQuery UI Sortable をデータベースと統合すると、オブジェクトの順序を動的に維持できるようになり、順序付けと永続化のための使いやすいインターフェイスが提供されます。