드래그 앤 드롭 UI로 목록 항목 정렬 순서를 관리하는 가장 좋은 방법은 무엇입니까?

웹 페이지에서 사용자에게 표 형식으로 표시해야하는 학생 목록이 있습니다.
항목은 SortOrder 정보와 함께 DB에 저장됩니다.

웹 페이지에서 사용자는 이 게시물 과 마찬가지로 항목을 원하는 정렬 순서로 끌어서 놓아 목록 순서를 다시 정렬 할 수 있습니다 .

아래는 내 테스트 페이지의 스크린 샷입니다.

위의 예에서 각 행에는 정렬 순서 정보가 첨부되어 있습니다. 학생 ID 1 행 위에 John Doe (학생 ID 10)를 놓으면 목록 순서는 이제 2, 10, 1, 8, 11이어야합니다.

정렬 순서 정보를 저장하고 업데이트하는 낙관적 (자원이 부족한) 방법은 무엇입니까?

현재 내 유일한 아이디어는 목록의 정렬 순서가 변경 될 때마다 모든 객체의 SortOrder 값을 업데이트해야한다는 것입니다.

참고로 테이블에 최대 25 개의 행이있을 수 있습니다.

쿼리를 줄일 수있는 무언가를 생각했습니다. 여기 예에서는 column정렬이라는 새로운 을 추가했습니다 pos. 따라서 처음에는 테이블을 드래그하지 않고 다음과 같습니다.

이제 & Item 4사이 를 드래그했다고 가정하겠습니다 . 이제, 새로운 가치에 대한이 될 것 인 . 따라서 데이터베이스에서 단일 행만 업데이트하면됩니다. 그리고, 당신은 얻을 것이다-Item 1Item 2posItem 4(20 + 10) / 215

다음은 에지 케이스가있는 플로우 차트입니다. i드래그 한 후 행의 새로운 배열 인덱스입니다-

이 플로우 차트는 ArrayOutOfBound점검을 처리하지 않습니다 . 그리고 에지의 경우 하나 이상의 쿼리가 필요합니다.

행이 25 개이므로 10,000위치 차이에 대해 매우 큰 값 (예 :)을 취할 수 있습니다 ( 10이 예제에서는 사용했습니다). 값이 클수록 충돌이 줄어 듭니다.

개인적으로 백엔드에서 데이터에 대한 JSON 배열을 반환합니다. 그런 다음 JavaScript (JQuery 또는 knockout)를 사용하여 데이터를 표시하고 정렬하고 다시 정렬합니다. 이렇게하면 정렬이 서버에 전혀로드되지 않습니다.

이를 처리하기위한 리소스 친화적 인 방법을 찾고 있지만 사용자 친화적 인 관점도 필수입니다. 재주문 한 각 항목마다 개별 요청을 권장합니다. 각 통화를 통해 수락 또는 실패 여부를 확인할 수 있습니다.

• 실패한 응답은보기를 재설정하고 최종 사용자에게 메시지를 표시합니다.
• 수락 된 요청은 간단한 편집을 허용합니다.

또는 JSON 객체 (@ tom-squires)를 사용하면 HTTP 오버 헤드 및 서버 측 처리를 줄이는 것이 좋지만 궁극적으로 서버 및 클라이언트 측의 요청을 처리하기 위해 더 많은 코드가 필요합니다. 괜찮다면 객체를 서버에 전달하는 것이 가장 기술적으로 효율적입니다. 또한 원하는 경우 단일 요청 전에 여러 재주문이 가능하도록 몇 초 지연 될 수 있습니다.

실패한 요청에 대한 피드백을 사용자에게 제공하려면 서버에서 응답 JSON 오브젝트를 구문 분석하여 실패한 항목을 파악하고이를 기반으로 UI를 재설정해야합니다.

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