简介
Vue.js 是当前最流行的前端框架之一。在 Vue.js 中，directive 是一个用于为元素添加一些自定义行为的指令。在这篇文章中，我们将介绍一个名为 vue-drag-directive 的 npm 包，它提供了一个易于使用的 Vue.js directive 来实现元素的拖拽功能。
安装
在使用 vue-drag-directive 之前，你需要先安装它。可以通过 npm 在项目路径下命令行终端输入以下命令进行安装：
npm install vue-drag-directive --save-dev
安装完成后，在需要使用的组件中引入该包：
import Vue from 'vue'
import VueDragDirective from 'vue-drag-directive'
Vue.directive('drag', VueDragDirective)注意，在引入后还需要注册该 directive。
使用
使用 vue-drag-directive 很简单，只需要在目标元素中指明 v-drag 指令即可。在你应用了这个指令之后，你就可以使用鼠标或手势来拖动该元素。
<template>
<div class="box" v-drag>
Drag me!
</div>
</template>为了限制拖动的方向，你可以在 v-drag 指令后传递一个方向参数。例如：
<template>
<div class="box" v-drag="'x'">
Drag me horizontally!
</div>
</template>此时，你只能在水平方向拖动目标元素。
高级使用
除了基本使用方法之外，vue-drag-directive 还提供了其它一些高级的功能用于更细粒度的控制拖动行为。
自定义跟随代理元素
在一些应用场景中，你可能需要自定义跟随代理元素，比如在拖动时想指定一个图片来代替被拖拽的实际元素。在 vue-drag-directive 中，你可以通过传递一个回调函数来实现这个目的：
-- -------------------- ---- -------
----------
---- ----------- --------- ------------- -------------- ---
---- ---
------
-----------
--------
------ ------- -
-------- -
--------------------- -
-- --------------------
-- ---
----- ------ - -----------------------------
---------------- - -- -- - --------
------ ------
--
--
-
---------触发拖动
有时，你可能希望在某些事件发生后手动触发一个拖动操作，比如希望在元素按下鼠标左键后开始拖动。这时，你可以在目标元素上绑定事件，在事件回调中手动调用 vue-drag-directive 提供的 startDrag 函数来触发拖动：
-- -------------------- ---- -------
----------
---- ----------- ------ --------- -----------------------
---- ---
------
-----------
--------
------ ------- -
-------- -
----------- -
--------------------------
--
--
-
---------示例代码
下面是一个简单的示例，展示了如何在一个 div 元素上应用 v-drag 指令并实现拖拽功能：
-- -------------------- ---- -------
----------
---- ----------- -------
---- ---
------
-----------
-------
---- -
-------- -----
----------------- --------
------- --------
-------- -------------
-
--------结论
在这篇文章中，我们介绍了如何在 Vue.js 项目中使用 vue-drag-directive 这个 npm 包来实现拖拽功能。除了基本的拖拽操作之外，我们还展示了一些高级用法，例如自定义跟随代理元素、手动触发拖动等。希望这篇文章对你学习 vue-drag-directive 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557b281e8991b448d4ba4