简介
随着互联网技术的不断发展，前端技术也迅速发展起来，更加便于前端开发的工具和框架也在不断涌现。其中一个重要的工具就是npm，它是 Node.js 的包管理器，是整个 Node.js 生态的核心。
而 @vadevteam/sortablejs 就是一个优秀的npm包，它能让前端界面拖放排序变得非常简单易用。
本文将带您深入学习 @vadevteam/sortablejs 的使用方法。
安装
使用 @vadevteam/sortablejs 之前，我们首先要安装它。
在命令行中输入以下命令：
npm install @vadevteam/sortablejs --save
安装完毕后，在你的项目中导入 Sortable 组件：
import Sortable from '@vadevteam/sortablejs';
使用方法
Sortable 的使用非常简单，它只需要将需要实现排序的区域添加到 Sortable 的实例中即可。
我们来写一个简单的示例代码：
-- -------------------- ---- ------- ------ -------- ---- ------------------------ -- --------- ----- -------- - ----------------------------------------- -- -- -------- ------------ ----- ---------------- - --- ------------------ - ---------- ---- ----------- ----------------- ---
以上示例中，我们通过 document.getElementById 获取了需要排序的区域，然后创建 Sortable 实例并将需要排序的区域传入，并设置了一些选项，比如动画时间和ghostClass。
API
Sortable 提供了很多可供选择的API，以下是其中一些常用的API方法：
sortableInstance.option(optionName, [value])
设置或获取选项的值。
// 设置选项
sortableInstance.option('group', 'groupName');
// 获取选项
const group = sortableInstance.option('group');sortableInstance.sort(order)
对区域中的元素进行排序。
sortableInstance.sort(['item1', 'item2', 'item3']);
sortableInstance.destroy()
销毁 Sortable 实例。
sortableInstance.destroy();
结语
本文详细介绍了如何使用 npm 包 @vadevteam/sortablejs，并针对常用的API提供了示例代码，希望能对读者有所帮助。当然，除了本文介绍的 API 方法之外，还有很多其他可供选择的 API 方法，可以根据实际情况进行选择。
在实际开发中，经常需要使用到类似的前端开发工具，希望读者们能够多加学习和使用，提高自身的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5f51ab1864dac6719c