Javascript SortableJS从嵌套列表获取订单

我尝试获取嵌套列表的顺序，该列表可以使用。 我的列表如下所示：

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

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

当我单击id为sendButton的按钮时，这会给出类

嵌套可排序的每个
div
的顺序。
例如，控制台输出如下所示：

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

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

但我不知道如何才能得到层次嵌套结构。。。我看不出div的父项是什么。
您将得到3个单独的可排序列表，任何排序都可能触发其他onSort事件，因为它们都写入同一个#标准#顺序字段，因此它将只包含写入标准#顺序字段的最后一个列表的元素。
只需添加一个console.log，即可查看事件中的可见时间和内容

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

如果你想得到所有的东西，你必须抓住它们

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

我制作了一个演示，演示了如何非常轻松地做到这一点：

重要部分（适用于SortableJS主页上的）：

如果我得到的所有项目都是
var nestedSortables=$（“#nestedemo.list group item”）for（var i=0；i
只能移动子列表而不能移动单个列表项：/Or对于我的计划是否有更好的插件/解决方案？我编辑我的问题，因为我有一个部分解决方案，但在我的解决方案中缺少最重要的东西，层次嵌套结构。@BastiG。我更新了JSBin和代码示例，您可以更改
标识符
要从元素中使用以标识项的任何属性。我向JSBin中的所有项添加了一个
数据可排序id
属性，并在代码中使用该属性标识它们。我想我做错了什么…我复制了上面的示例代码，并将属性
可排序id
添加到我的所有列表项中，如下所示：
Titel 1
但是控制台仍然得到
id:undefined
@BastiG。
sortableId
只是javascript中访问它的方式。在HTML中它被设置为
data sortable id
。查看JSBin即可。上面的JSBin演示不再工作，因为SortableJS不再支持GitHub作为CDN。在HTML标记中，替换为unpkg URL：
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))