使用拖放UI管理列表项排序顺序的最佳方法是什么？

我有一个学生列表，应该以表格形式显示在网页上。
这些项目与SortOrder信息一起存储在DB中。

在网页上，用户可以通过将项目拖放到所需的排序顺序来重新排列列表顺序，类似于此文章。

以下是我的测试页的屏幕截图。

在上面的示例中，每行都附加了排序顺序信息。当我将John Doe（学生ID 10）放到“学生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为pos差取一个非常大的值（例如）（我在10此示例中采用了）。值越大，碰撞越少。

就个人而言，我将从后端返回一个JSON数组用于数据。然后，我将使用JavaScript（JQuery或敲除）来显示，排序和重新排序数据。这样，排序对服务器的负载为零。

您正在寻找一种资源友好的方式来处理此问题，但是用户友好的观点也是必须的。我建议在每个重新订购的物品后提出单独的要求。每个呼叫都允许您检查是否已接受或失败。

• 失败的响应将重置视图并向最终用户显示一条消息。
• 简单的接受请求就可以继续编辑。

另外，使用JSON对象（@ tom-squires）是减少HTTP开销和服务器端处理的好主意，但最终需要更多代码来处理服务器和客户端上的请求。如果可以，将对象传递到服务器在技术上最有效。如果您愿意，它还允许延迟几秒钟，以便在单个请求之前进行多次重新排序。

请记住，为了向用户提供来自失败请求的反馈，您必须从服务器解析一个响应JSON对象，以找出哪个项目失败并基于此重置UI。

在放置事件处理程序中，类似这样的东西，其中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;
        }
    ...