js-sortable 是一個用于使 HTML 列表可排序的 JavaScript 庫。它主要依賴于在客戶端進行操作，處理列表項之間的拖放和排序。然而，它本身并不直接支持從遠程服務器獲取數據。
如果您希望實現可排序列表并顯示來自遠程服務器的數據，您可以采取以下步驟：
fetch API 或 XMLHttpRequest）從遠程服務器獲取數據。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 事件會被觸發，您可以在其中處理排序后的數據。
