简介
Sortable.js 是一个强大的 JavaScript 库，提供了对可拖拽列表的支持。它可以帮助我们处理一些拖拽操作时的逻辑问题，并使得拖拽操作更加顺滑。@types/sortablejs 是一个 TypeScript 定义文件的 npm 包，它为 Sortable.js 的使用提供了更好的开发体验，本文将提供详细的 @types/sortablejs 使用教程。
安装
对于一个 TypeScript 工程，我们可以使用 npm 命令来安装 @types/sortablejs 包：
#$ npm install @types/sortablejs --save-dev
使用方法
在我们的 Typescript 代码中，我们需要在文件最上面添加引入语句：
import Sortable from 'sortablejs';
这时我们就可以使用 Sortable 类提供的 API 来创建拖拽列表了。
基本使用
首先，我们需要一个 HTML 代码段来展示出列表内容。以下是一个例子：
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>然后，我们可以使用 Sortable 类来将列表变成可拖拽列表，下面是代码：
const list: HTMLElement = document.getElementById('list');
const sortable = new Sortable(list);现在，我们已经创建了一个简单的拖拽列表。
高级使用
除了基本使用方式之外，我们还可以通过设置 Sortable 类的参数来自定义列表的行为。以下是一些常用的参数和用法：
animation（动画）：当拖拽元素要被放置到列表中时，透明度以及定位等动画效果如何展现。direction（方向）：列表的排列方向：水平方向（"horizontal"）或垂直方向（"vertical"）。group（分组）：可拖拽列表分组，同一组内的列表可以互相拖拽。设置为 true 或相同值的字符串即可。onAdd（添加事件）：当一个元素被拖拽到列表之后触发的事件。onUpdate（更新事件）：当一个元素在列表内被拖拽之后触发的事件。onRemove（移除事件）：当一个元素从列表中移除之后触发的事件。
以下是如何使用分组和添加事件的实例示例代码：
-- -------------------- ---- -------
-- ----
----- --------- - --- ----------------------------------------- -
------ -----------
---
-- ------------------------
----- --------- - --- ----------------------------------------------- -
------ -----------
---
-- ----
--- ----------------------------------------- -
------ ------------
-------- ------- -- ------------------- ------------
------ ------- -- ----------------- ----------- ------ --------------
------ ------- -- ------------------------- ----------------
--------- -------- ---- ----- -- ---- -
-- --- ------- ------ --- ----- ------ --- ------
--------------------------
--
--------- ------- -- ------------------ ----------- -------- ------------
------- -------- ---- ----- -- ---- -
-- ---- ---------- -- --------
--
---总结
@types/sortablejs 包提供了 TypeScript 对 Sortable.js 功能的良好支持，使得列表的操作变得更加方便和高效。通过此教程，你已经掌握了基本的使用方式和常用 API 的使用方法，这将有助于你将它应用到你的项目中，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/types-sortablejs