简介
在前端开发中，有很多常见的需求，比如说拖拽功能。而在 Vue 中，有一个非常好用的拖拽组件库叫做 draggable-vue。它对原生 HTML5 的拖拽功能进行了二次封装，并且提供了一些更方便的配置选项和钩子函数。下面就来详细介绍一下如何使用这个 npm 包。
安装
首先，在项目中安装 draggable-vue：
npm install draggable-vue --save
基本用法
在 Vue 组件中，首先需要将 draggable-vue 导入：
import draggable from 'vuedraggable'
然后，在模板中加入 draggable 标签，比如：
<draggable v-model="list">
<div v-for="item in list">
{{ item.text }}
</div>
</draggable>上述代码中，v-model 绑定了一个 list 数组，表示可拖拽列表项的顺序。而 draggable 标签内部通过 v-for 循环渲染了数组中的每个对象，并显示了它们的内容。
配置选项
draggable-vue 支持更多的配置选项，比如：
- group：表示可拖拽列表项的分组，同一个分组内的列表项可以互相拖拽，不同分组的列表项不能拖拽。
- handle：表示拖拽操作只能通过某个指定的元素进行，比如可以设置 handle=".my-handle"，表示只有拖拽元素内部带有 my-handle 类名的元素才能拖拽。
- ghost-class：表示拖拽元素的类名，可以通过它来设置拖拽时的样式。
- ...
具体选项的含义和使用方式可以参考 官方文档。
例如，可以通过如下代码定义一个带有分组、指定拖动句柄、拖拽时带有阴影效果的列表：
<draggable v-model="list" group="items" handle=".item-handle" ghost-class="ghost">
<div v-for="item in list" class="item">
<div class="item-handle">≡</div>{{ item.name }}
</div>
</draggable>事件钩子
draggable-vue 提供了一些事件钩子，可以在拖拽过程中或者拖拽完成后进行处理，比如：
- start：开始拖拽时执行的函数。
- sort：拖拽排序时执行的函数。
- end：拖拽完成后执行的函数。
具体事件钩子的参数和使用方式可以参考 官方文档。
例如，可以通过如下代码在拖拽结束后弹出一个提示：
-- -------------------- ---- -------
---------- -------------- -----------------
---- ----------- -- ------
-- --------- --
------
------------
---
-------- -
---------- ---------- -
---------------
-
-示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
----------
-----
-----------------
---------- --------------- ------------- -----------------
---- ------------- ------ -- ------ ------------ -------------
---- ----------------------
---- ---------------- ---------- --------
---- ---------------------- ---------------- --------
------
------------
------
-----------
--------
------ --------- ---- --------------
------ ------- -
----------- -
---------
--
------ -
------ -
------ -
- ------ ------ ------------ -------- --
- ------ ------ ------------ -------- --
- ------ ------ ------------ -------- --
- ------ ------ ------------ -------- --
-
-
--
-------- -
---------- ---------- -
---------------
-
-
-
---------
------ -------
----- -
-------- -----
------------ -------
-------- -----
-------------- ----
----------------- --------
----------- --- --- --- ------- -- -- -----
-
------- -
------ -----
------- -----
------------ -----
----------- -------
------------- -----
------- -----
-
------ -
---------- -----
------------ -----
------------- -----
-
------------ -
----- --
---------- -----
-
--------总结
通过以上内容我们可以看到，在 Vue 中使用 draggable-vue 可以非常方便地实现列表项拖拽功能，并且还提供了一些实用的配置选项和事件钩子。对于需要拖拽功能的项目，使用这个 npm 包是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e481e8991b448e0714