Tabela com ordenação

[CyberLACS]

Tenho uma tabela que tem a opção para reordenar, caso aja necessidade

Carregamento | Gênero | Quantidade | Inicia | Finaliza | Proprietário
1                      | Novilha  | 30               | 1        | 30            | Popeye
2                     | Boi          | 30               | 31      | 60            | Ligeirinho
3                     | Boi        | 10                 | 61      | 70           | Simpsons
3                     | Vaca      | 10                | 71      | 80           | Simpsons
3                     | Novilha | 10                | 81       | 90          | Simpsons

Consegui fazer a tabela reordenar caso necessário,  no exemplo o carregamento 1 para a ordem do 2º carregamento, pois tem somente uma linha, olha exemplo abaixo

1                     | Boi          | 30               | 1          | 30            | Ligeirinho
2                     | Novilha  | 30               | 31      | 60            | Popeye
3                     | Boi        | 10                 | 61      | 70           | Simpsons
3                     | Vaca      | 10                | 71      | 80           | Simpsons
3                     | Novilha | 10                | 81       | 90          | Simpsons

Se caso queira alterar a ordem de carregamento 3 que tem 03 linhas para o 01 Carregamento só vai uma a linha selecionada, e neste caso tem que ir as 03 linhas deste carregamento

1                     | Boi          | 10                 | 1           | 10           | Simpsons
2                     | Boi          | 30               | 21          | 40            | Ligeirinho
3                     | Novilha  | 30               | 41           | 70            | Popeye
4                     | Vaca      | 10                | 71          | 80           | Simpsons
5                     | Novilha | 10                | 81           | 90          | Simpsons 

O que aconteceu acima não pode ocorrer pois o carregamento ficou separado.

Gostaria de saber como fazer o Javascript ( AJAX ) fazer esta validação.

Abaixo segue exemplo que fiz em HTML e Javascript

 

JAVASCRIPT (AJAX)

<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>

<script>
    $(document).ready(function () {
        $("#sortable").sortable({
            update: function (event, ui) {
                var itemIds = "";
                $("#sortable").find(".taskSingleInLine").each(function () {
                    var itemId = $(this).attr("data-taskid");
                    itemIds = itemIds + itemId + ",";
                });
                $.ajax({
                    url: '@Url.Action("UpdateItem", "Lotes")',
                    data: { itemIds: itemIds },
                    type: 'POST',
                    success: function (data) {

                    },
                    error: function (xhr, status, error) {

                    }
                });
            }
        });
    });
</script>

HTML

<table class="table">
        
        <thead>
            <tr>
                <th>Carregamento</th><th>Gênero</th><th>Quantidade</th><th>Inicia</th><th>Finaliza</th><th>Proprietário</th>
            </tr>
        </thead>

        <tbody id="sortable" style="cursor:pointer">

            <tr>
                <td>1</td><td>Boi</td><td>10</td><td>1</td><td>10</td><td class="taskSingleInLine" id="task@(itemLoteGenero.GeneroId)" data-taskid="@(itemLoteGenero.GeneroId)">Simpsons</td>
            </tr>
            <tr>
                <td>2</td><td>Boi</td><td>10</td><td>1</td><td>10</td><td class="taskSingleInLine" id="task@(itemLoteGenero.GeneroId)" data-taskid="@(itemLoteGenero.GeneroId)">Simpsons</td>
            </tr>
            <tr>
                <td>3</td><td>Novilha</td><td>10</td><td>1</td><td>10</td><td class="taskSingleInLine" id="task@(itemLoteGenero.GeneroId)" data-taskid="@(itemLoteGenero.GeneroId)">Simpsons</td>
            </tr>
            <tr>
                <td>3</td><td>Vaca</td><td>10</td><td>1</td><td>10</td><td class="taskSingleInLine" id="task@(itemLoteGenero.GeneroId)" data-taskid="@(itemLoteGenero.GeneroId)">Simpsons</td>
            </tr>
            <tr>
                <td>3</td><td>Boi</td><td>10</td><td>1</td><td>10</td><td class="taskSingleInLine" id="task@(itemLoteGenero.GeneroId)" data-taskid="@(itemLoteGenero.GeneroId)">Simpsons</td>
            </tr>
        </tbody>
    </table>