阅读量:0
js-sortable 是一个用于使 HTML 列表可排序的 JavaScript 库。它主要依赖于在客户端进行操作，处理列表项之间的拖放和排序。然而，它本身并不直接支持从远程服务器获取数据。
如果您希望实现可排序列表并显示来自远程服务器的数据，您可以采取以下步骤：
- 使用 AJAX（例如使用
fetchAPI 或XMLHttpRequest）从远程服务器获取数据。 - 将获取到的数据解析为 JavaScript 对象或数组。
- 使用
js-sortable对解析后的数据创建可排序列表。
以下是一个简单的示例，展示了如何将远程数据与 js-sortable 结合使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sortable List with Remote Data</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/latest/Sortable.min.css"> </head> <body> <ul id="sortableList"></ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/latest/Sortable.min.js"></script> <script> // 获取远程数据 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { // 创建可排序列表 const sortableList = new Sortable(document.getElementById('sortableList'), { animation: 150, onUpdate: function (event) { console.log('Sorted list:', event.target.children); } }); // 将数据添加到列表中 data.forEach(item => { const listItem = document.createElement('li'); listItem.textContent = item.name; listItem.dataset.id = item.id; sortableList.append(listItem); }); }) .catch(error => { console.error('Error fetching remote data:', error); }); </script> </body> </html> 在这个示例中，我们首先使用 fetch API 从远程服务器获取数据，然后将其解析为 JSON 格式。接下来，我们使用 js-sortable 创建一个可排序列表，并将解析后的数据添加到列表中。当列表项的顺序发生变化时，onUpdate 事件会被触发，您可以在其中处理排序后的数据。
