在前端开发中，经常会遇到需要支持拖拽排序的需求，而 @vadevteam/vuedraggable 即是为此而生的 npm 包。它提供了一个简单易用的组件，可以在 Vue 应用中实现拖拽排序功能。
本文将详细介绍 @vadevteam/vuedraggable 的使用方法，包括安装、配置、事件等方面的内容。同时，通过实际的示例代码，帮助读者理解、掌握该 npm 包的使用技巧。
安装 @vadevteam/vuedraggable
首先，在你的 Vue 项目中安装 @vadevteam/vuedraggable，可以使用以下命令：
npm install @vadevteam/vuedraggable --save
引入 @vadevteam/vuedraggable
在 Vue 组件中添加以下代码引入 @vadevteam/vuedraggable：
import Vuedraggable from '@vadevteam/vuedraggable'
Vue.component('vuedraggable', Vuedraggable)这么做的目的是将该组件注册成全局组件，以便在所有地方都能使用。
使用 @vadevteam/vuedraggable
在 Vue 组件中使用 @vadevteam/vuedraggable 组件，需要编写以下代码：
-- -------------------- ---- -------
----------
-----
------------- -------------- ----------------- -----------
---- ----------- -- ----- ----------------------------------
---------------
------
-----------
--------
------ ------- -
------ -
------ -
----- -
---- -- ----- ------
---- -- ----- ------
---- -- ----- -----
-
-
-
-
---------这里，我们定义了一个 list 数组来表示需要进行排序的元素列表。在 HTML 结构中，我们首先用 v-for 指令将 list 数组中的元素循环渲染到页面上。接着，我们给每个元素加上一个 key 属性以便 Vue 识别和监控。
在 vuedraggable 组件中，我们传入两个 props，分别是 v-model 和 options。其中 v-model 用来绑定排序后的元素列表，而 options 则是一些配置项，这里我们指定了分组名称为 people。
这样就可以使用 @vadevteam/vuedraggable 组件了。
@vadevteam/vuedraggable 事件
除了 v-model 和 options 之外，@vadevteam/vuedraggable 还支持各种事件。以下是一些常用的事件：
start
拖拽开始时触发，可以用于获取拖拽的元素信息。
<vuedraggable @start="handleStart"> <!-- ... --> </vuedraggable>
methods: {
handleStart(evt) {
console.log(evt)
}
}end
拖拽结束时触发，可以用于更新拖拽后的元素列表。
<vuedraggable @end="handleEnd" v-model="list"> <!-- ... --> </vuedraggable>
methods: {
handleEnd(evt) {
console.log(evt)
}
}add
当一个元素被加入到一个列表时触发，可以用于更新列表数据。
<vuedraggable @add="handleAdd" v-model="list"> <!-- ... --> </vuedraggable>
methods: {
handleAdd(evt) {
console.log(evt)
}
}remove
当一个元素被从一个列表中移除时触发，可以用于更新列表数据。
<vuedraggable @remove="handleRemove" v-model="list"> <!-- ... --> </vuedraggable>
methods: {
handleRemove(evt) {
console.log(evt)
}
}@vadevteam/vuedraggable 配置项
@vadevteam/vuedraggable 还提供了一些常用的配置项，以下是一些常见的配置项：
group
分组名称，可以将多个列表分为一组，以便拖拽时跨组拖拽。
<vuedraggable :options="{group: 'people'}">
<!-- ... -->
</vuedraggable>sort
是否可以进行排序，默认为 true。
<vuedraggable :options="{sort: false}">
<!-- ... -->
</vuedraggable>draggable
拖拽的元素，可以是一个 CSS 选择器字符串或一个 DOM 元素。
<vuedraggable :options="{draggable: '.item'}">
<div class="item" v-for="item in list" :key="item.id">{{item.name}}</div>
</vuedraggable>handle
拖拽把手，可以是一个 CSS 选择器字符串或一个 DOM 元素。
<vuedraggable :options="{handle: '.handle'}">
<div class="item">
<div class="handle">拖拽我</div>
<div class="content">{{item.name}}</div>
</div>
</vuedraggable>示例代码
最后，我们来看一个使用 @vadevteam/vuedraggable 的完整示例代码：
-- -------------------- ---- -------
----------
-----
-------------
------------- -------------- ----------------- ---------- -----------------
---- ------------ ----------- -- ----- ---------------
---- ---------------------
---- -----------------------------------
---- ----------------
-- -------- --------------------------------------
-- -------- ----------------------------------------
------
------
---------------
---- ----------------
------- ------------------------------
------
------
-----------
--------
------ ------------ ---- -------------------------
----------------------------- -------------
------ ------- -
------ -
------ -
----- -
---- -- ----- ------
---- -- ----- ------
---- -- ----- -----
-
-
--
-------- -
--------- -
------------------- ----------- ----- -------
--
-------------- -
------------------ -----
--
---------------- -
----------------------------------------- --
--
-------------- -
------------------ ----
-
-
-
---------
-------
----- -
-------- -----
------------ -------
---------------- --------------
-------- -------
------- --- ----- -----
----------------- -----
-
------- -
------ --------
------- --------
-------------- ----
----------------- -----
------- -----
-
-------- -
----- --
------------ -----
-
-------- -
-------- -----
------------ -------
---------------- ---------
------------ -----
-
- -
------ --------
---------------- -----
------------- -----
-
--------这个示例包含了一个人物列表的实现，每个人物都有一个拖拽把手、一个名字和两个操作按钮。同时，还有一个添加人物的按钮。整个列表可以被拖拽排序。点击编辑和删除按钮，会触发相应的事件回调函数。同时，添加新人物会触发添加事件回调函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6051ab1864dac6725f