Jaki jest najlepszy sposób zarządzania kolejnością sortowania elementów listy za pomocą interfejsu Drag & Drop?

Mam listę studentów, którą powinienem wyświetlić użytkownikowi na stronie internetowej w formacie tabelarycznym.
Elementy są przechowywane w DB wraz z informacjami SortOrder.

Na stronie internetowej użytkownik może zmienić kolejność na liście, przeciągając i upuszczając elementy do pożądanej kolejności sortowania, podobnie jak w tym poście .

Poniżej zrzut ekranu mojej strony testowej.

W powyższym przykładzie do każdego wiersza dołączone są informacje o kolejności sortowania. Kiedy upuszczam John Doe (Student Id 10) powyżej wiersza Student Id 1, kolejność na liście powinna teraz wynosić: 2, 10, 1, 8, 11.

Jaki jest optymistyczny (mniej wymagający zasobów) sposób przechowywania i aktualizowania informacji o sortowaniu?

Moim jedynym pomysłem na razie jest to, że przy każdej zmianie kolejności sortowania listy wartość SortOrder każdego obiektu powinna być aktualizowana, co moim zdaniem jest bardzo wymagające zasobów.

Tylko do twojej wiadomości: Mogę mieć maksymalnie 25 wierszy w mojej tabeli.

Pomyślałem o czymś, co może ograniczyć twoje zapytania. Tutaj w moim przykładzie dodałem nowy columndo sortowania o nazwie pos. Tak więc początkowo bez przeciągania twój stół będzie wyglądał jak -

Rozważmy teraz, że przeciągnąłeś Item 4pomiędzy Item 1& Item 2. Teraz nowa poswartość dla Item 4będzie (20 + 10) / 2, czyli jest 15. Musisz więc zaktualizować tylko jeden wiersz w bazie danych. I dostaniesz -

Oto schemat blokowy ze skrzynkami brzegowymi. ito nowy indeks tablicy wiersza po przeciągnięciu -

Ten schemat blokowy nie obsługuje ArrayOutOfBoundczeków. A w przypadkach krawędzi potrzebujesz więcej niż jednego zapytania.

Ponieważ masz tylko 25 wierszy, możesz wziąć bardzo dużą wartość (np. 10,000) Dla różnicy pozycji (wziąłem 10dla tego przykładu). Im większa wartość, tym mniej się zderzy.

Osobiście zwróciłbym tablicę JSON dla danych z zaplecza. Następnie użyłbym JavaScript (JQuery lub knockout) do wyświetlania i sortowania oraz ponownego sortowania danych. W ten sposób sortowanie nie obciąża serwera.

Szukasz przyjaznego dla zasobów sposobu na poradzenie sobie z tym, ale przyjazna dla użytkownika perspektywa jest również koniecznością. Polecam indywidualne zamówienia po każdym zamówionym produkcie. Każde połączenie pozwala sprawdzić, czy zostało przyjęte czy nieudane.

• Nieudane odpowiedzi resetują widok i wyświetlają komunikat dla użytkownika końcowego.
• Proste zaakceptowane wnioski pozwalają na dalszą edycję.

Alternatywnie, użycie obiektu JSON (@ tom-squires) jest dobrym pomysłem, aby zmniejszyć obciążenie HTTP i przetwarzanie po stronie serwera, ale ostatecznie wymaga więcej kodu do obsługi żądań po stronie serwera i klienta. Jeśli to jest OK, przekazanie obiektu do serwera jest najbardziej technicznie wydajne. Pozwala to również na kilkuminutowe opóźnienie, aby umożliwić wielokrotne ponowne uporządkowanie przed pojedynczym żądaniem, jeśli tego chcesz.

Należy pamiętać, że aby przekazać użytkownikowi informację zwrotną na temat nieudanych żądań, trzeba przeanalizować obiekt JSON odpowiedzi z serwera, aby dowiedzieć się, który element się nie powiódł i na tej podstawie zresetować interfejs użytkownika.

Coś takiego w module obsługi zdarzenia drop, gdzie e jest zdarzeniem 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;
        }
    ...