是的,Sortable.js 可以實現拖拽排序。Sortable.js 是一個輕量級的 JavaScript 庫,用于實現拖拽排序列表。它非常靈活,支持多種排序模式,如垂直、水平、自定義排序等。要使用 Sortable.js,你需要在 HTML 中創建一個列表,并在 JavaScript 中初始化它。
以下是一個簡單的示例,展示了如何使用 Sortable.js 實現垂直拖拽排序:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sortable.js Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable.js/latest/Sortable.min.css">
</head>
<body>
<ul id="sortableList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable.js/latest/Sortable.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
)中初始化 Sortable.js:const sortableList = document.getElementById('sortableList');
const sortable = new Sortable(sortableList, {
animation: 150,
onUpdate: function (event) {
console.log('Sorted items:', sortableList.children);
}
});
在這個示例中,我們創建了一個垂直排序的列表,并在 onUpdate
事件中打印排序后的列表。你可以根據需要修改這個示例,以適應你的項目需求。更多關于 Sortable.js 的信息和示例,請參考官方文檔:https://sortablejs.github.io/Sortable/