js sortable能實(shí)現(xiàn)拖拽排序嗎

js
小樊
81
2024-10-23 00:48:06
欄目: 編程語言

是的，Sortable.js 可以實(shí)現(xiàn)拖拽排序。Sortable.js 是一個(gè)輕量級(jí)的 JavaScript 庫(kù)，用于實(shí)現(xiàn)拖拽排序列表。它非常靈活，支持多種排序模式，如垂直、水平、自定義排序等。要使用 Sortable.js，你需要在 HTML 中創(chuàng)建一個(gè)列表，并在 JavaScript 中初始化它。

以下是一個(gè)簡(jiǎn)單的示例，展示了如何使用 Sortable.js 實(shí)現(xiàn)垂直拖拽排序：

  1. 首先，在 HTML 中創(chuàng)建一個(gè)列表：
<!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>
  1. 接下來，在 JavaScript 文件（如 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);
    }
});

在這個(gè)示例中，我們創(chuàng)建了一個(gè)垂直排序的列表，并在 onUpdate 事件中打印排序后的列表。你可以根據(jù)需要修改這個(gè)示例，以適應(yīng)你的項(xiàng)目需求。更多關(guān)于 Sortable.js 的信息和示例，請(qǐng)參考官方文檔：https://sortablejs.github.io/Sortable/

0 踩