Apa cara terbaik untuk mengelola pesanan pengurutan item daftar dengan Drag & Drop UI?

Saya memiliki daftar Siswa yang harus saya tampilkan kepada pengguna di halaman web dalam format tabel.
Item disimpan dalam DB bersama dengan informasi SortOrder.

Pada halaman web, pengguna dapat mengatur ulang urutan daftar dengan menyeret dan menjatuhkan item ke urutan pengurutan yang diinginkan, mirip dengan posting ini .

Di bawah ini adalah tangkapan layar dari halaman pengujian saya.

Dalam contoh di atas, setiap baris memiliki info urutan yang terlampir. Ketika saya menjatuhkan John Doe (Student Id 10) di atas baris Student Id 1, urutan daftar sekarang harus: 2, 10, 1, 8, 11.

Apa cara optimis (kurang lapar sumber daya) untuk menyimpan dan memperbarui informasi Urutkan Urutan?

Satu-satunya ide saya untuk saat ini adalah, untuk setiap perubahan dalam urutan pengurutan daftar, nilai SortOrder setiap objek harus diperbarui, yang menurut saya sangat membutuhkan sumber daya.

Hanya FYI: Saya mungkin memiliki paling banyak 25 baris di meja saya.

Saya telah memikirkan sesuatu, yang dapat mengurangi pertanyaan Anda. Di sini, dalam contoh saya, saya telah menambahkan nama baru columnuntuk sortasi pos. Jadi, awalnya tanpa menyeret meja Anda akan seperti -

Sekarang, mari kita pertimbangkan bahwa Anda menyeret Item 4antara Item 1& Item 2. Sekarang, baru posnilai Item 4akan (20 + 10) / 2, yang 15. Jadi, Anda hanya perlu memperbarui satu baris dalam basis data. Dan, Anda akan mendapatkan -

Berikut adalah diagram alur dengan kasing tepi. iadalah indeks array baru dari baris Anda setelah diseret -

Diagram alir ini tidak menangani ArrayOutOfBoundpemeriksaan. Dan, untuk kasus tepi Anda akan membutuhkan lebih dari satu permintaan.

Karena Anda hanya memiliki 25 baris, Anda dapat mengambil nilai yang sangat besar (misalnya 10,000) untuk perbedaan pos (saya ambil 10untuk contoh ini). Semakin besar nilainya, semakin sedikit akan bertabrakan.

Secara pribadi saya akan mengembalikan array JSON untuk data dari ujung belakang. Kemudian saya akan menggunakan JavaScript (JQuery atau sistem gugur) untuk menampilkan dan mengurutkan dan mengurutkan kembali data. Dengan cara itu pengurutan tidak memiliki beban di server.

Anda mencari cara yang ramah sumber daya untuk menangani ini, tetapi perspektif ramah pengguna juga merupakan keharusan. Saya merekomendasikan permintaan individual setelah setiap item yang dipesan ulang. Setiap panggilan memungkinkan Anda memeriksa apakah diterima atau gagal.

• Respons yang gagal akan mengatur ulang tampilan dan menampilkan pesan kepada pengguna akhir.
• Permintaan yang diterima sederhana memungkinkan pengeditan lanjutan.

Atau, menggunakan objek JSON (@ tom-squires) adalah ide yang bagus untuk mengurangi overhead HTTP dan pemrosesan sisi server tetapi pada akhirnya membutuhkan lebih banyak kode untuk menangani permintaan di sisi server dan klien. Jika itu OK, mengirimkan objek ke server paling efisien secara teknis. Ini juga memungkinkan untuk penundaan beberapa detik untuk memungkinkan beberapa pemesanan ulang sebelum satu permintaan, jika Anda menginginkannya.

Ingat, untuk memberikan umpan balik kepada pengguna dari permintaan yang gagal, Anda harus menguraikan objek JSON respons dari server untuk mencari tahu item mana yang gagal dan mengatur ulang UI berdasarkan itu.

Sesuatu seperti ini di drop event handler, di mana e adalah acara 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;
        }
    ...