简介
Sortable List 是一个轻量级的 JavaScript 库，可用于创建可排序的列表或树形结构。它具有良好的性能，并提供了丰富的配置选项和事件。
该库可以被集成到你的前端项目中，并且使用方便。在本文中，我们将学习如何使用 Sortable List，并提供一些示例代码和学习资源。
安装
Sortable List 是一个 npm 包，可以使用 npm 安装：
npm install sortablejs
使用
下面我们将为你介绍如何使用 Sortable List。
在 HTML 中添加列表
首先，在 HTML 中添加列表。我们可以将它设置为 ul 或 ol 元素，并添加一些 list-item 子元素。
<ul id="my-list"> <li class="list-item">Item 1</li> <li class="list-item">Item 2</li> <li class="list-item">Item 3</li> </ul>
初始化 Sortable List
接下来，在 JavaScript 中初始化 Sortable List，以使它为列表元素添加可排序属性。在这里，我们可以将 sortable 选项设置为 id 为“my-list”的元素。
import Sortable from 'sortablejs';
const myList = document.getElementById('my-list');
const sortable = new Sortable(myList, {
// Options go here
});添加事件监听器
Sortable List 提供了多种事件，可以让我们监听拖放操作、排序操作以及其他操作。我们可以使用 addEventListener 方法添加事件监听器。
sortable.addEventListener('sort', (evt) => {
console.log('Item moved:', evt.item);
});配置选项
Sortable List 提供了多种配置选项，可以定制拖动、排序、滚动以及其他行为。下面是一个示例配置对象：
-- -------------------- ---- ------- - ------ --------- ---------- ---- --------------- ----- -------------- ---- ---------- ------------- ------- ----- ------------------ ---- ------------ --- ------ -- --------- ------ ----------- -------- ------------ --------- ---------- ------ -
更多配置选项，请查看 Sortable List 官方文档。
示例代码
下面是一个简单的示例，演示如何在一个 ol 元素中使用 Sortable List。
-- -------------------- ---- -------
--- -------------
--- ---------------------- ------
--- ---------------------- ------
--- ---------------------- ------
--- ---------------------- ------
--- ---------------------- ------
--- ---------------------- ------
-----
------- --------------------------------------------------------------------------------------
--------
----- ------ - -----------------------------------
----- -------- - --- ---------------- -
------ ---------
---------- ----
---
--------------------------------- ----- -- -
----------------- -------- ----------
---
---------学习资源
如果你想更深入地学习 Sortable List，以下是一些学习资源：
- Sortable List 官方文档：https://sortablejs.github.io/Sortable/
- Sortable List GitHub 仓库：https://github.com/SortableJS/Sortable
- 《JavaScript 高级程序设计》第三版（含组件开发）：https://book.douban.com/subject/10789856/（本书介绍了如何使用 Sortable List 等开源组件开发复杂的 Web 应用程序。）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbc81e8991b448e6306