SortableJS get order from nested list

问题

i try to get the order of a nested list that can be ordered with SortableJS. My list looks like this:

<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>

and my javascript code:

<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>

My aim is to get the order by every change of the list and store the order in an input field with the id standard_order. I do this because i have an submit button to store the order in a database. My problem is when i change the order not the complete list is stored in my input field but rather only the sublist in that i dropped the current element.

I have try to use one list but than the nested list not work..

Can you help me to handle my problem?

Edit:

I think i have a general solution.

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

This give me the order of every div with the class nested-sortable when i click the button with the id sendButton. For example the console output looks like this:

(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"]

But i don't know how can i get the the hierarchical nested structure... I can not see what the parent of the div is.

回答1:

I have made a demo showing how to do this very easily: https://jsbin.com/reyecop/edit?js,output

The important part (applied to the Nested Demo on the SortableJS homepage):

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))

回答2:

You end up with 3 separate sortable lists and any sort may be triggering the other onSort events and because they are all writing to the same #standard_order field, it will only contain the elements of the last list that wrote to the standard_order field. Just add a console.log to see when and what is visible in the event.

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

if you want to get all items you will have to grab them

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

来源：https://stackoverflow.com/questions/56571434/sortablejs-get-order-from-nested-list