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

10

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.
masukkan deskripsi gambar di sini

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.

c# sorting

— Alexander
sumber

1

Apakah Anda perlu memiliki pesanan semacam ini tetap ada di sisi server, atau apakah hanya cukup di sisi klien?

— deterb

1

Saya harus menyimpan pesanan di sisi server. Tidak masalah jika pesanan disimpan pada setiap drag-drop atau dengan mengklik tombol sekali dan untuk semua.

— Alexander

10

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 -

Keadaan awal

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 -

Setelah Seret

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

Diagram alir

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.

— Rifat
sumber

Ini pendekatan yang bagus. Perhatikan bahwa Anda harus menghitung ulang seluruh (atau sebagian besar) info pemesanan jika tidak ada ruang untuk menyisipkan item. Ini akan menjadi peristiwa yang cukup langka untuk dilawan.

— 9000

@ 9000 Anda dapat menggunakan desimal alih-alih bilangan bulat untuk menghindari masalah.

— Rifat

jika Anda memiliki Item Adengan posisi 123 dan Item Cdengan posisi 124, tidak ada cara mudah untuk menempatkan Item B antara mereka. Satu solusi akan menggunakan bilangan pecahan (misalnya mengapung), tetapi mereka memiliki ketepatan yang terbatas juga. Terkadang Anda lebih baik melakukan penggantian nomor, interval normalisasi, dan menjaga hal-hal sederhana.

— 9000

Jadi ketika Anda melakukan i--, Anda hanya mengurangi dengan 1. Apakah tidak ada interval berbeda yang bisa Anda kurangi dengan untuk mencegah tabrakan akhirnya?

— muttley91

@Rifat bahkan desimal memiliki presisi terbatas, sehingga mereka akan bertabrakan juga.

— SCI

3

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.

— Tom Squires
sumber

0

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.

— David Garza
sumber

-1

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;
        }
    ...

— Masuk
sumber