js sortable能实现拖拽排序吗

小樊

2024-10-23 00:48:06

栏目: 编程语言

是的，Sortable.js 可以实现拖拽排序。Sortable.js 是一个轻量级的 JavaScript 库，用于实现拖拽排序列表。它非常灵活，支持多种排序模式，如垂直、水平、自定义排序等。要使用 Sortable.js，你需要在 HTML 中创建一个列表，并在 JavaScript 中初始化它。

以下是一个简单的示例，展示了如何使用 Sortable.js 实现垂直拖拽排序：

首先，在 HTML 中创建一个列表：

<!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>

接下来，在 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);
    }
});

在这个示例中，我们创建了一个垂直排序的列表，并在 onUpdate 事件中打印排序后的列表。你可以根据需要修改这个示例，以适应你的项目需求。更多关于 Sortable.js 的信息和示例，请参考官方文档：https://sortablejs.github.io/Sortable/

js sortable能实现拖拽排序吗

最新问答

相关标签