Sortable.js 是一個流行的 JavaScript 庫,用于使列表可排序。它確實支持移動端設備。通過使用 touch 事件,Sortable.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.js Mobile Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.css">
</head>
<body>
<ul id="sortableList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
<script>
new Sortable(document.getElementById('sortableList'), {
animation: 150,
});
</script>
</body>
</html>
在這個示例中,我們創建了一個包含四個列表項的無序列表,并通過引入 Sortable.js 庫并初始化它來使其可排序。animation
選項用于設置拖放動畫的速度,數值越小表示動畫越平滑。
請注意,雖然 Sortable.js 在大多數移動端設備上表現良好,但在某些情況下,您可能需要針對特定設備或瀏覽器進行調整和優化。因此,在使用 Sortable.js 時,請務必查閱其官方文檔以獲取最新信息和最佳實踐。