SortableJS obtiene orden de la lista anidada

Intento obtener el orden de una lista anidada que se puede ordenar con SortableJS . Mi lista se ve así:

<div id="nestedDemo" class="list-group col nested-sortable">
    <div class="list-group-item" data-id="1">Titel 1</div>
    <div class="list-group-item" data-id="2">Titel 2</div>
    <div class="list-group-item" data-id="3">Titel3
        <div class="list-group nested-sortable">
            <div class="list-group-item" data-id="4">Titel 4</div>
            <div class="list-group-item" data-id="5">Titel 5</div>
            <div class="list-group-item" data-id="6">Titel 6</div>
        </div>
    </div>
    <div class="list-group-item" data-id="7">Titel 7</div>
    <div class="list-group-item" data-id="8">Titel 8</div>
    <div class="list-group-item" data-id="9">Titel 9</div>
    <div class="list-group-item" data-id="10">Titel10
        <div class="list-group nested-sortable">
            <div class="list-group-item" data-id="11">Titel 11</div>
            <div class="list-group-item" data-id="12">Titel 12</div>
        </div>
    </div>
</div>

y mi código javascript:

<script>
    $(document).ready(function() { var nestedSortables = $(".nested-sortable");

        // Loop through each nested sortable element
        for (var i = 0; i < nestedSortables.length; i++) {
            new Sortable(nestedSortables[i], {
                group: 'nested',
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65,
                onSort: function (e) {
                    var items = e.to.children;
                    var result = [];
                    for (var i = 0; i < items.length; i++) {
                        result.push($(items[i]).data('id')); } $('#standard_order').val(result);
                }
            });
        }
    });
</script>

Mi objetivo es obtener el pedido con cada cambio de la lista y almacenar el pedido en un campo de entrada con la identificación standard_order. Hago esto porque tengo un botón de envío para almacenar el pedido en una base de datos. Mi problema es que cuando cambio el orden, no se almacena la lista completa en mi campo de entrada, sino solo la sublista en la que eliminé el elemento actual.

Intenté usar una lista, pero la lista anidada no funciona.

¿Puedes ayudarme a resolver mi problema?

Editar:

Creo que tengo una solución general.

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

        var sortables = [];

        // Loop through each nested sortable element
        for (var i = 0; i < nestedSortables.length; i++) {
            sortables[i] = new Sortable(nestedSortables[i], {
                group: 'nested',
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65
            });
        }

        $('#sendButton').click(function () {
            for(var y = 0; y < sortables.length; y++) {
                var order = sortables[y].toArray();
                console.log(order);
            }
        });

Esto me da el orden de cada divcon la clase nested-sortablecuando hago clic en el botón con la identificación sendButton. Por ejemplo, la salida de la consola se ve así:

(7) ["Titel 1", "Titel 2", "Titel 3", "Titel 7", "Titel 8", "Titel 8", "Titel 10"]
(3) ["Titel 4", "Titel 5", "Titel 6"]
(2) ["Titel 11", "Titel 12"]

Pero no sé cómo puedo obtener la estructura anidada jerárquica ... No puedo ver cuál es el padre del div.

Hice una demostración que muestra cómo hacer esto muy fácilmente: https://jsbin.com/reyecop/edit?js,output

La parte importante (aplicada a la demostración anidada en la página de inicio de SortableJS):

const nestedQuery = '.nested-sortable';
const identifier = 'sortableId';
const root = document.getElementById('nestedDemo');
function serialize(sortable) {
  var serialized = [];
  var children = [].slice.call(sortable.children);
  for (var i in children) {
    var nested = children[i].querySelector(nestedQuery);
    serialized.push({
      id: children[i].dataset[identifier],
      children: nested ? serialize(nested) : []
    });
  }
  return serialized
}

console.log(serialize(root))

Termina con 3 listas ordenables separadas y cualquier tipo puede desencadenar los otros eventos onSort y, dado que todos escriben en el mismo campo #standard_order, solo contendrá los elementos de la última lista que escribieron en el campo standard_order. Simplemente agregue un archivo console.log para ver cuándo y qué es visible en el evento.

$("#standard_order").val(result);
console.log(result);

si quieres obtener todos los artículos, tendrás que agarrarlos

var items = $("#nestedDemo .list-group-item"); 
.. same loop logic
$("#standard_order").val(result);