vue-sortable-plugin 是一个 Vue.js 组件，它为您提供了轻松拖放排序的功能。它基于 Sortable.js 构建，可以用来构建有序列表、拖放元素、垂直列表排列视图等。本文通过安装该插件、使用demo等方面，详细介绍其使用方法。
前置知识
在使用 vue-sortable-plugin 之前，您需要了解以下知识：
- Vue.js 组件
- ES6/JavaScript
安装
使用npm安装
vue-sortable-plugin 可以使用 npm 安装，只需打开终端或命令行窗口，并在项目的根目录中执行以下命令：
npm i vue-sortable-plugin --save
使用cdn
<script src="https://unpkg.com/vue-sortable-plugin@1.1.0"></script>
在 Vue.js 中使用 vue-sortable-plugin
- 引入 vue-sortable-plugin
在 Vue.js 组件中，您需要使用以下代码来引入 vue-sortable-plugin：
import vueSortable from 'vue-sortable-plugin'
或者您可以在HTML中使用 cdn 的方式引入该插件。
- 注册到Vue.js的组件中
您需要将 vue-sortable-plugin 注册到您的 Vue.js 组件中：
-- -------------------- ---- -------
------ ------- -
---- -- -
------ -
-- ---- ----
-
--
----------- -
-----------
-
-- 在模板中使用
在模板中，您可以使用以下代码来使用 vue-sortable-plugin：
<vue-sortable
v-model="arrayName"
:options="{name: 'options-for-sortablejs'}"
>
<li v-for="(item, index) in arrayName" :key="index">
{{ item }}
</li>
</vue-sortable>其中，v-model 绑定的是需要排序的数组名，其值为对象数组。
您还可以在选项中配置更多选项，他们会传递给 Sortable.js。
示例代码
-- -------------------- ---- -------
----------
-------------
---------------
--------------
--------------
----------------------
-
---
------------- ------ -- ------
--------------
-------------
-
-- --------- --
-----
---------------
-----------
--------
------ --- ---- -----
------ ----------- ---- ---------------------
------ ------- -
----------- -
-----------
--
---- -- -
------ -
------ -
------ ----- ----- --- -----------
------ ----- ------- --- -------------
------ -------- ----- --- -------------
-
-
--
-------- -
------ ----- -
----------------
-- --- --- ---- --- ----- ----
----------
-
-
-
---------当您按照上面的步骤使用该插件后，就可以实现拖拽排序了。它可以非常方便地帮助您构建一个复杂的 Vue.js 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673481e8991b448e3b8f