js sortable能处理动态数据吗

JavaScript Sortable 是一个用于对列表进行排序的库，它非常灵活且易于使用。它可以处理动态数据，即可以在运行时向列表中添加、删除或修改数据。

要处理动态数据，您可以使用 Sortable 的 update 方法。当列表发生变化时（例如，通过拖放操作），您可以调用此方法来更新排序。

以下是一个简单的示例，演示了如何使用 Sortable 处理动态数据：

HTML:

<ul id="sortableList">
  <li data-id="1">Item 1</li>
  <li data-id="2">Item 2</li>
  <li data-id="3">Item 3</li>
</ul>

JavaScript:

const sortableList = document.getElementById('sortableList');
const sortable = new Sortable(sortableList, {
  onUpdate: function (event) {
    // 获取排序后的列表项
    const sortedItems = Array.from(sortableList.children);

    // 根据排序后的列表项更新数据源
    const data = sortedItems.map(item => {
      return {
        id: item.getAttribute('data-id'),
        text: item.textContent
      };
    });

    console.log(data);
  }
});

在这个示例中，我们创建了一个具有三个列表项的无序列表。每个列表项都有一个 data-id 属性，用于存储其数据。我们使用 Sortable 库对列表进行排序，并在排序发生变化时调用 onUpdate 方法。在 onUpdate 方法中，我们获取排序后的列表项，并根据它们更新数据源。