ドラッグ＆ドロップUIでリストアイテムの並べ替え順序を管理する最良の方法は何ですか？
表形式でWebページに表示する必要がある生徒のリストがあります。
アイテムは、SortOrder情報とともにDBに保存されます。
Webページでは、ユーザーは this post と同様に、アイテムを希望の並べ替え順序にドラッグアンドドロップしてリストの順序を並べ替えることができます。
以下は私のテストページのスクリーンショットです。
上記の例では、各行に並べ替え順序情報が添付されています。 John Doe（学生ID 10）を学生ID 1の行の上にドロップすると、リストの順序は2、10、1、8、11になります。
ソート順情報を保存および更新するための楽観的な（リソースを節約する）方法は何ですか？
私の現時点での唯一のアイデアは、リストの並べ替え順序が変更されるたびに、すべてのオブジェクトのSortOrder値を更新する必要があるということです。
参考までに：テーブルに最大25行ある可能性があります。
私はあなたのクエリを減らすことができる何かを考えています。ここでの例では、columnという名前の並べ替え用に新しいposを追加しました。したがって、最初はテーブルをドラッグすることなく、次のようになります-
ここで、Item 4をItem 1とItem 2の間でドラッグしたとしましょう。これで、Item 4の新しいpos値は(20 + 10) / 2、つまり15になります。したがって、データベースの単一行を更新するだけで済みます。そして、あなたは得るでしょう-
Edgeケースのフローチャートを次に示します。 iは、ドラッグ後の行の新しい配列インデックスです-
このフローチャートはArrayOutOfBoundチェックを処理しません。また、エッジの場合は、複数のクエリが必要になります。
行は25行しかないため、posの差には非常に大きな値（例：10,000）をとることができます（この例では10を使用しました）。値が大きいほど、衝突が少なくなります。
個人的には、バックエンドからのデータのJSON配列を返します。次に、JavaScript（JQueryまたはノックアウト）を使用して、データの表示、並べ替え、再並べ替えを行います。そうすれば、サーバーの負荷がゼロになります。
これを処理するためのリソースフレンドリーな方法を探していますが、ユーザーフレンドリーな視点も必要です。再注文した商品ごとに個別のリクエストをお勧めします。呼び出しごとに、受け入れられるか失敗したかを確認できます。
- 失敗した応答はビューをリセットし、エンドユーザーにメッセージを表示します。
- 受け付けられたリクエストは単純で、編集を続けることができます。
または、JSONオブジェクト（@ tom-squires）を使用することは、HTTPオーバーヘッドとサーバー側の処理を削減するための良いアイデアですが、サーバーとクライアント側の要求を処理するために最終的にはより多くのコードが必要です。それが問題なければ、サーバーにオブジェクトを渡すのが最も技術的に効率的です。また、必要に応じて、1回のリクエストの前に複数の再注文を可能にするために、数秒の遅延を許容します。
失敗したリクエストからのフィードバックをユーザーに提供するには、サーバーからの応答JSONオブジェクトを解析して、失敗したアイテムを特定し、それに基づいてUIをリセットする必要があることに注意してください。