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