前言
Vue.js 是一款适合构建交互式前端界面的开源 JavaScript 框架，而 npm 则是 JavaScript 的包管理工具，通过 npm 我们可以快速下载各种 JavaScript 库和包。本文将介绍一个基于 Vue.js 的 npm 包——vue-isortable 的使用教程。
什么是 vue-isortable
vue-isortable 是一个基于 Vue.js 的可拖拽、可排序的组件库，支持多种配置和自定义效果，可以在 Vue.js 应用程序中引入，使得用户可以通过拖拽的方式方便地进行元素的排序操作。
安装 vue-isortable
要安装 vue-isortable，你可以通过以下命令使用 npm：
npm install vue-isortable
安装完成后，你还需要在你的 Vue.js 应用程序中引入 vue-isortable，视情况而定，你可以使用 ES6 或 CommonJS 模块引入。
如果你使用 ES6 模块，可以在你的组件中添加以下代码：
import sortable from 'vue-isortable';
如果你使用 CommonJS 模块，可以在你的组件中添加以下代码：
var sortable = require('vue-isortable');使用 vue-isortable
vue-isortable 提供了多种配置和自定义效果的方式，在这里，我们只介绍其中的一些基础配置和使用方法。
基础用法
以下是一段基本的使用示例，我们定义了一个包含多个元素的列表，并在 Vue 实例中注册并绑定了 sortable 组件：
-- -------------------- ---- -------
----------
--------- --------------------- --------- ----- ------------ ----- ------ ---- ---- ---
--- ------------- ------ -- --------- ---- -------
-----------
-----------
--------
------ -------- ---- ----------------
------ ------- -
----- ------
----------- -
---------
--
------ -
------ -
------ --------- -------- -------- -------- -------- ---------
--
--
--
---------在这里，我们将列表的每个元素用 li 标签包裹，并通过数组 items 来数据绑定，然后使用 sortable 组件来包含这个列表。在 sortable 组件中，我们设置了一个 group 对象，用于定义 dropzone 的行为和限制，默认情况下，vue-isortable 会使用所有的 sortable 组件的数据进行排序。
参数详解
group
group 对象用于定义 dropzone 的行为和限制，具体包含以下属性：
name：可拖拽的组件所处的组别，仅对同一组别的组件有效。pull：是否允许将排序列表中的内容拖出改组，取值为 false 或 true。put：是否允许将其他组别中的内容放进该组，取值为 false 或 true。
sort
sort 对象用于自定义排序效果，具体包含以下属性：
animation：是否开启排序的动画效果，取值为 false 或 true。delay：排序动画的延迟时间，单位为毫秒，默认值为 0。transitionDuration：排序动画的过渡时间，单位为毫秒，默认值为 150。
更多参数和使用示例，请参考 vue-isortable 的官方文档和 demo。
总结
vue-isortable 是一个基于 Vue.js 的可拖拽、可排序的组件库，支持多种配置和自定义效果，可以在 Vue.js 应用程序中引入，方便地进行元素的排序操作。本文介绍了 vue-isortable 的安装和使用方法，并详细介绍了其中的一些基础配置和使用方法。通过本文，相信读者已经基本掌握了 vue-isortable 的使用技巧，可以在实际项目中灵活运用该组件库，并根据具体需求进行自定义配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8d238a385564ab6e98