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 为 sendButton 的按钮时，这会给我每个 div 和 class nested-sortable 的顺序。例如，控制台输出如下所示：

(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 的父级是什么。

Answer 1

你最终得到 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);

Answer 2

我制作了一个演示，展示了如何轻松地做到这一点：https://jsbin.com/reyecop/edit?js,output

重要部分（应用于SortableJS首页Nested Demo）：

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

SortableJS 从嵌套列表中获取顺序

SortableJS get order from nested list

javascript

jquery

jquery-ui-sortable

sortablejs