JQuery UI сортировка с группами и без групп

Question

У меня есть условный код таблицы, одно условие: структура таблицы выглядит следующим образом:

<table id="uisortable" data-section="inline" class="table ui-sortable" width="100%" border="0">
    <tbody>

        <tr id="item-8258">
            <td width="3%">1</td>

        </tr>

        <tr id="item-8261">
            <td width="3%">2</td>

        </tr>

        <tr id="item-8260">
            <td width="3%">3</td>

        </tr>

        <tr id="item-8264">
            <td width="3%">4</td>

        </tr>

        <tr id="item-8262">
            <td width="3%">5</td>

        </tr>

        <tr id="item-8266">
            <td width="3%">6</td>

        </tr>

        <tr id="item-8263">
            <td width="3%">7</td>

        </tr>

        <tr id="item-8267">
            <td width="3%">8</td>

        </tr>

        <tr id="item-8265" style="background-color:#CCC;">
            <td width="3%">9</td>

        </tr>

        <tr id="item-8268">
            <td width="3%">10</td>

        </tr>

        <tr id="item-8259">
            <td width="3%">11</td>

        </tr>

        <tr id="item-8269">
            <td width="3%">12</td>

        </tr>

        <tr id="item-8270">
            <td width="3%">13</td>

        </tr>

        <tr id="item-8271">
            <td width="3%">14</td>

        </tr>

        <tr id="item-8272">
            <td width="3%">15</td>

        </tr>

        <tr id="item-8273">
            <td width="3%">16</td>

        </tr>

        <tr id="item-8274">
            <td width="3%">17</td>

        </tr>

    </tbody>
</table>

и при другом условии структура выглядит так:

<table id="uisortable" data-section="table" class="table ui-sortable" width="100%" border="0">
    <tbody>

        <tr id="item-8535" class="parent sortable-row ui-state-default" data-question-id="1128">
            <td width="3%">2</td>

        </tr>

        <tr id="item-8536" class="childrow ui-state-default" data-answer-id="1128">
            <td width="3%">4</td>

        </tr>

        <tr id="item-8531" class="childrow ui-state-default" data-answer-id="1129">
            <td width="3%">6</td>

        </tr>

        <tr id="item-8534" class="childrow ui-state-default" data-answer-id="1129">
            <td width="3%">8</td>

        </tr>

        <tr id="item-8527" class="childrow ui-state-default" data-answer-id="1125">
            <td width="3%">9</td>

        </tr>

        <tr id="item-8530" class="parent sortable-row ui-state-default" data-question-id="1125">
            <td width="3%">10</td>

        </tr>

        <tr id="item-8532" class="childrow ui-state-default" data-answer-id="1125">
            <td width="3%">11</td>

        </tr>

        <tr id="item-8537" class="childrow ui-state-default" data-answer-id="1125">
            <td width="3%">12</td>

        </tr>

        <tr id="item-8528" class="parent sortable-row ui-state-default" data-question-id="388">
            <td width="3%">13</td>

        </tr>

        <tr id="item-8523" class="parent sortable-row ui-state-default" data-question-id="225">
            <td width="3%">14</td>

        </tr>

        <tr id="item-8533" class="parent sortable-row ui-state-default" data-question-id="1127">
            <td width="3%">15</td>
        </tr>

    </tbody>
</table>

Теперь я использую сортируемый плагин jquery UI для сортировки. Первый работает нормально, так как не имеет отношения родитель-потомок, а второй - все портит,

Я пытаюсь переместить родителя вместе с детьми вместо другого родителя и прибегнуть к нему, у выпадающего родителя могут быть дети, а у них не может быть детей,

дети могут двигаться только внутри своих родителей

Код есть, но не работает должным образом, я определенно что-то упустил, вот мой код

var $tableToReorder = $("#uisortable");
var isTable = $tableToReorder.data('section');
if (isTable == 'inline') {
    var items = 'tr';
    var handle = false;
    var forceHelperSize = false;
} else {
    var items = 'tr';
    var handle = '.childrow';
    var forceHelperSize = true;
}
var sortableHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};

function SortingStared() {
    $('#uisortable').sortable({
        containment: "document",
        items: items,
        opacity: '.5',
        axis: "y",
        helper: sortableHelper,
        tolerance: 'pointer',
        handle: handle,
        forceHelperSize: forceHelperSize,
        placeholder: "ui-state-highlight",
        start: function(e, ui) {
            ui.placeholder.height(ui.helper.outerHeight());
            notice("Sort Order Updating, Please wait...", "info");
        },
        update: function(e, ui) {

            if (isTable == 'inline') {
                $.post('sort.php', order, function() {
                    alert("done");
                });
            } else {
                var tableHasUnsortableRows = $(this).find('> tbody > tr:not(.sortable-row)').length;

                $(this).find('> tbody > tr.sortable-row').each(function(idx, row) {
                    /* If we are reordering a table with some fixed rows, make sure the fixed rows
                     * always follow their corresponding sortable row so they always appear together. */
                    if (tableHasUnsortableRows) {
                        var uniqID = $(this).attr('data-question-id'),
                            correspondingFixedRow = $('tr:not(.sortable-row)[data-answer-id=' + uniqID + ']');
                        correspondingFixedRow.detach().insertAfter($(this));
                    }
                });

                info = $(this).serialize();
                $.ajax({
                    url: 'sort.php',
                    type: 'POST',
                    data: info,
                    async: false,
                    dataType: 'json',
                    success: function(data) {
                        alert("done");
                    }
                });
            }
        },
        activate: function(event, ui) {
            for (var i = $('.ui-state-default').length - 1; i >= 0; i--) {
                $('.pull-left:eq(' + i + ')').html(i + 1);
            }
        }
    }).disableSelection();
}

Я использую

handle: handle,
forceHelperSize: forceHelperSize,

но я не уверен, что это будет работать или нет, добавил это, и он не тянет

Скрипка, которую я вставил, здесь

https://jsfiddle.net/3hqs21w6/12/

это работает несколько, но это я создал из структуры таблицы