Sortable 是一个轻量级的 JavaScript 库,用于排序和拖放列表项。它是基于 HTML5 的 drag and drop API 构建的,并且具有可定制性强、易于使用的特点。在本文中,我们将讨论如何使用 npm 包 sortable 并提供详细的教程和示例代码。
安装
安装 sortable 是非常简单的。首先,打开终端并进入项目目录,然后运行以下命令:
--- ------- ----------
这将在您的项目中安装 sortable。
基本用法
使用 sortable 极其简单。首先,您需要创建一个 HTML 列表,然后初始化 sortable 对其进行排序和拖放操作。以下是一个最简单的示例:
--- ------------- -------- ------ -------- ------ -------- ------ -----
------ -------- ---- ------------- --- ------ - ----------------------------------- --- -----------------
这将使您的列表变得可拖动,并允许对其中的项进行排序。
高级用法
可排序选项
您可以通过向 Sortable 构造函数传递选项对象来自定义 sortable 的行为。以下是可用选项的示例:
--- ---------------- - ------ --------- ---------- ---- ------- ---------- ----------- ----------------- ------ -------- ----- - ----------------- ----- ------ ------------- ----- -------------- - ---
这些选项包括:
group
:定义可以一起排序的列表。默认情况下,所有列表都是独立的。animation
:定义动画持续时间(以毫秒为单位)。handle
:指定应用于某个元素的手柄的选择器。仅允许在手柄上拖动。ghostClass
:启用占位符元素时应用的类名。onEnd
:当拖放操作结束时触发的回调函数。
除了这些选项之外,还有许多其他可用选项。您可以在 官方文档 中找到完整的选项列表。
事件
Sortable 还提供了几个事件,可以用来监视拖放操作中的不同阶段。以下是一些示例:
--- ---------------- - -------- -------- ----- - ----------------- ---------- -- ------- -------- ----- - -------------------- -- --------- -- ------ -------- ----- - -------------------- ----- -- ------- -- --------- -------- ----- - ----------------- ---------- -- ------- -------- ----- - ----------------- --------- -- --------- -------- ----- - -------------------- ------- ---- ------- -- ------ -------- ----- - ----------------- -------- - ---
这些事件包括:
onStart
:在拖动操作开始时触发。onMove
:在元素移动时连续触发。onAdd
:当添加元素到列表中时触发。onUpdate
:当列表项被更新时触发。onSort
:每次排序时触发。onRemove
:当元素从列表中删除时触发。onEnd
:在拖动操作结束时触发。
方法
Sortable 还提供了几个方法,可以用来修改、重置和销毁 sortable。以下是一些示例:
--- ---------- - --- ----------------- ------------------- -- ---- -- --------- --------------------- -- -- ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------