将撤消添加到具有嵌套列表的 SortableJS 列表

问：

我有一个 HTML 列表，其中可能包含零个或多个嵌套列表。 嵌套列表永远不会超过一级，即嵌套列表不能包含嵌套列表本身。 用户可以添加/删除嵌套列表。

当页面加载时，我使用以下命令遍历根列表的顶层：

const sortoptions = {
    group: {
      name: 'items',
      pull: function (to, from, dragEl) {
        return !dragEl.matches('[data-nested^="nested-"]') || !to.el.matches('[data-nested^="nested-"] > ol');
      }
    },
    ghostClass: 'ghost',
    store: {
      get: function (sortable) {
        let order = localStorage.getItem(sortable.options.group.name);
        return order ? order.split('|') : [];
      },
      set: function (sortable) {
        let order = sortable.toArray(),
            n = order.join('|'),
            o = localStorage.getItem(sortable.options.group.name);
           
        if (n != o) { // changed
          localStorage.setItem(sortable.options.group.name, order.join('|'));
        }
      }
    },
    animation: 150,
    fallbackOnBody: true,
    swapThreshold: 0.65
  };

Sortable.create(document.querySelector('#root'), sortoptions);

通过嵌套列表，代码如下：

let num = 1;
Sortable.create(document.querySelector('[data-nested="nested-' + num + '"]'), sortoptions);

生成的列表按预期运行（对此我非常高兴）：

• 根项可以重新排序
• 嵌套列表中的项可以移动到根目录或其他嵌套列表
• 嵌套列表可以重新排序
• 根项可以移动到嵌套列表中

我试图解决的问题是如何将撤消功能添加到包含嵌套列表的列表中。

每次我尝试某些东西时，列表都是可排序的，但撤消似乎永远不起作用。

每次调用 Sortable.create 都会创建一个新实例，因此我真的不知道如何知道哪些项目（父项和子项）要存储到 localStorage，我稍后需要撤消这些项。

我是否只是创建一个根数组，然后将每个嵌套列表连接到它？但是，我怎么知道嵌套列表是否为新位置？

我取得了一些进展。在每次调用“create”之前，我都会添加一个“name”属性

sortoptions.name = 'foo";
Sortable.create(document.querySelector(...

然后在商店中，我可以使用“名称”引用特定的 Sortable，例如：

store: {
  get: function (sortable) {
    const inst = sortable.options.group.name + '-' + sortable?.options?.name;

此外，由于某种未知原因，我需要手动为每个可拖动项目添加数据属性。如果我将其保留为“可排序”，则每次将项目拖动到新位置时，属性值都会更改。我的下一步是处理子列表。