Який найкращий спосіб керувати порядком сортування елементів списку за допомогою інтерфейсу Drag & Drop?

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

На веб-сторінці користувач може змінити порядок списку, перетягнувши елементи та перетягнувши їх у потрібний порядок сортування, подібно до цієї публікації .

Нижче - скріншот моєї тестової сторінки.

У наведеному вище прикладі до кожного рядка додається інформація про порядок впорядкування. Коли я опускаю Джона Доу (Student Id 10) над рядком Student Id 1, порядок у списку повинен бути таким: 2, 10, 1, 8, 11.

Який оптимістичний (менш голодний ресурс) спосіб зберігання та оновлення інформації про сортування замовлення?

Наразі моя єдина ідея - для кожної зміни порядку сортування списку слід поновлювати значення SortOrder кожного об'єкта, що, на мою думку, дуже сильне.

Просто FYI: у мене може бути не більше 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 або нокаут) для відображення та сортування та пересортування даних. Таким чином сортування має нульове навантаження на сервер.

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

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

Крім того, використання об’єкта 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;
        }
    ...