ドラッグ＆ドロップUIでリストアイテムの並べ替え順序を管理する最良の方法は何ですか？

表形式でWebページに表示する必要がある生徒のリストがあります。
アイテムは、SortOrder情報とともにDBに格納されます。

この投稿のように、ユーザーはWebページで、アイテムを希望の並べ替え順序にドラッグアンドドロップして、リストの順序を並べ替えることができます。

以下は、私のテストページのスクリーンショットです。

上記の例では、各行に並べ替え順序情報が添付されています。John Doe（学生ID 10）を学生ID 1の行の上にドロップすると、リストの順序は2、10、1、8、11になります。

ソート順情報を保存および更新するための楽観的な（リソースを節約する）方法は何ですか？

私の現時点での唯一のアイデアは、リストの並べ替え順序が変更されるたびに、すべてのオブジェクトのSortOrder値を更新する必要があるということです。

参考までに：テーブルに最大25行ある可能性があります。

私はあなたのクエリを減らすことができる何かを考えています。ここでの例では、columnという名前の新しい並べ替えを追加しましたpos。したがって、最初はテーブルをドラッグせずに次のようになります-

では、＆のItem 4間をドラッグしたとしましょう。今、新しいの値はなりますしています、。したがって、データベースの単一行を更新するだけで済みます。そして、あなたは得るでしょう-Item 1Item 2posItem 4(20 + 10) / 215

エッジケースのフローチャートを次に示します。iドラッグ後の行の新しい配列インデックスです-

このフローチャートはArrayOutOfBoundチェックを処理しません。また、エッジケースの場合は、複数のクエリが必要になります。

行は25行しかない10,000ため、posの差には非常に大きな値（たとえば）をとることができます（10この例では私が取り上げました）。値が大きいほど、衝突が少なくなります。

個人的には、バックエンドからのデータのJSON配列を返します。次に、JavaScript（JQueryまたはノックアウト）を使用して、データの表示、並べ替え、再並べ替えを行います。これにより、サーバーの負荷がゼロになります。

これを処理するためのリソースフレンドリーな方法を探していますが、ユーザーフレンドリーな視点も必要です。再注文した商品ごとに個別のリクエストをお勧めします。呼び出しごとに、受け入れられるか失敗したかを確認できます。

• 失敗した応答はビューをリセットし、エンドユーザーにメッセージを表示します。
• 受け入れられたリクエストは単純で、編集を続けることができます。

または、JSONオブジェクト（@ tom-squires）を使用すると、HTTPオーバーヘッドとサーバー側の処理を減らすことができますが、サーバーとクライアント側の要求を処理するためにより多くのコードが必要になります。それが問題なければ、オブジェクトをサーバーに渡すのが最も技術的に効率的です。また、これが必要な場合は、単一の要求の前に複数の再注文を可能にするために、数秒の遅延を許容します。

失敗したリクエストからのフィードバックをユーザーに提供するには、サーバーからの応答JSONオブジェクトを解析して、失敗したアイテムを特定し、それに基づいてUIをリセットする必要があることに注意してください。

ドロップイベントハンドラーでのこのようなもの。eはDnDイベントです。

        ....
        if (e.Action == DragAction.Drop)
        {
            foreach(var item in Items)
            {
                if (e.NewIndex == e.OldIndex) // Dropped in same place
                    return;
                if(e.OldIndex > e.NewIndex) // Moved Up
                {
                    if (item.SortOrder >= e.NewIndex && item.SortOrder < e.OldIndex)
                    {
                        item.SortOrder ++;
                    }
                }
                else // Moved Down
                {
                    if (item.SortOrder> e.OldIndex && item.SortOrder < e.NewIndex) 
                    {
                        item.SortOrder --;
                    }
                }   
            }
            ((Student)e.ItemData).SortOrder = e.NewIndex;
        }
    ...