Каков наилучший способ управления порядком сортировки элементов списка с помощью Drag & Drop UI?

У меня есть список студентов, который я должен отобразить пользователю на веб-странице в табличном формате.
Элементы хранятся в БД вместе с информацией SortOrder.

На веб-странице пользователь может изменить порядок списка, перетаскивая элементы в желаемый порядок сортировки, аналогично этому сообщению .

Ниже приведен скриншот моей тестовой страницы.

В приведенном выше примере к каждой строке прикреплена информация о порядке сортировки. Когда я опускаю John Doe (Student Id 10) над строкой Student Id 1, список должен выглядеть следующим образом: 2, 10, 1, 8, 11.

Каков оптимистичный (менее ресурсоемкий) способ хранения и обновления информации о порядке сортировки?

Моя единственная идея на данный момент заключается в том, что при каждом изменении порядка сортировки списка значение SortOrder каждого объекта должно обновляться, что, на мой взгляд, очень ресурсоемко.

Только к вашему сведению: в моей таблице может быть не более 25 строк.

Я думаю о чем-то, что может уменьшить ваши запросы. Здесь, в моем примере, я добавил новый columnдля сортировки имени pos. Итак, изначально без каких-либо перетаскиваний ваш стол будет похож на -

Теперь давайте посмотрим, что вы перетянули Item 4между Item 1& Item 2. Теперь, новое posзначение Item 4будет (20 + 10) / 2, что 15. Таким образом, вам нужно будет обновить только одну строку в базе данных. И вы получите -

Вот блок-схема с крайними случаями. iновый индекс массива вашей строки после перетаскивания -

Эта блок-схема не обрабатывает ArrayOutOfBoundпроверки. И для крайних случаев вам потребуется более одного запроса.

Так как у вас есть только 25 строк, вы можете принять очень большое значение (например 10,000) для разницы между позициями (я взял 10для этого примера). Чем больше значение, тем меньше оно будет сталкиваться.

Лично я бы возвратил массив JSON для данных из серверной части. Затем я использовал бы JavaScript (JQuery или knockout) для отображения, сортировки и повторной сортировки данных. Таким образом, сортировка имеет нулевую нагрузку на сервер.

Вы ищете удобный для решения этой проблемы ресурс, но удобная точка зрения также необходима. Я рекомендую индивидуальные запросы после каждого заказа. Каждый звонок позволяет вам проверить, принят он или нет.

• Неудачные ответы сбрасывают представление и отображают сообщение для конечного пользователя.
• Принятые запросы просто позволяют продолжить редактирование.

В качестве альтернативы, использование объекта JSON (@ tom-squires) является хорошей идеей для сокращения накладных расходов HTTP и обработки на стороне сервера, но в конечном итоге требует больше кода для обработки запросов на стороне сервера и клиента. Если все в порядке, передача объекта на сервер наиболее технически эффективна. Он также допускает задержку в пару секунд, чтобы сделать возможным несколько повторных заказов перед одним запросом, если вы этого хотите.

Имейте в виду, что для предоставления пользователю обратной связи по неудавшимся запросам вам нужно будет проанализировать ответный объект JSON с сервера, чтобы выяснить, какой элемент не выполнен, и сбросить пользовательский интерфейс на его основе.

Примерно так в обработчике события drop, где 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;
        }
    ...