SortableJS从嵌套列表中获取订单

Question

我试图获得可以用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>

以及我的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>

我的目标是通过列表的每一项更改获得订单，并使用id standard_order将订单存储在输入字段中。我这样做是因为我有一个提交按钮来将订单存储在数据库中。我的问题是，当我更改顺序时，没有将完整的列表存储在我的输入字段中，而是存储在子列表中，因为我删除了当前元素。

我试着用一个列表，但比嵌套列表不工作。

你能帮我处理一下我的问题吗？

编辑：

我想我有一个通用的解决方案。

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

当我单击id div的按钮时，这给出了类nested-sortable的每个sendButton的顺序。例如，控制台输出如下所示：

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

但我不知道怎样才能得到层次嵌套结构..。我看不出迪夫的父母是什么。

Answer 1

我做了一个演示，演示了如何很容易地做到这一点：https://jsbin.com/reyecop/edit?js,output

重要的部分(应用于嵌套演示的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))

Answer 2

您将得到3个单独的可排序列表，任何类型的列表都可能触发其他onSort事件，因为它们都写入同一个#standard_order字段，因此它将只包含写入standard_order字段的最后一个列表中的元素。只需添加一个console.log来查看事件中何时以及什么是可见的。

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

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

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