vue-drag-2.0 是一个适用于 Vue.js 的轻量级拖拽组件，它可以帮助你快速实现拖拽、排序、缩放等操作，非常适合用于制作拖拽排序列表、拖拽调整视图大小等应用场景。这篇文章将向你详细介绍如何使用 vue-drag-2.0 实现以上功能。
安装
在开始之前，我们需要先安装 vue-drag-2.0 包，你可以通过 npm 来安装它，使用以下命令：
npm install vue-drag-2.0 --save
注意：安装之前，你需要确保已经安装好了 Vue.js，否则你需要先执行以下命令安装 Vue.js：
npm install vue --save
快速上手
安装好后，我们就可以在项目中引入并使用 vue-drag-2.0 了，只需要在组件中 import 即可：
import Vue from 'vue' import VueDrag from 'vue-drag-2.0' Vue.use(VueDrag)
这样我们就成功引入了 vue-drag-2.0 组件。接下来就可以在组件中使用 draggable，sortable 和 resizable 三个指令来实现拖拽、排序和缩放操作了。
拖拽操作
首先我们来看看如何使用 draggable 指令实现拖拽操作。
最简单的拖拽
最简单的拖拽只需要在 html 中指定 v-draggable 指令即可：
<div v-draggable> 我可以被拖拽 </div>
自定义拖拽句柄
有时候我们只需要拖拽句柄来操作某个元素，那么我们可以使用 drag-handle 属性来指定句柄元素：
<div v-draggable drag-handle=".handle"> <div class="handle">我是拖拽句柄</div> <div>我可以被拖拽</div> </div>
在这个例子中，只有鼠标点击拖拽句柄部分才会拖动整个 div 元素。
拖拽限制范围
有时候我们需要限制拖拽的范围，这时我们可以使用 bound 属性来指定范围元素：
<div v-draggable bound="#container">
我只能在 container 内拖拽
</div>
<div id="container" style="position: relative;">
<div style="position: absolute; top: 0; left: 0;">
<div style="height: 200px; width: 200px; border: 1px solid black;"></div>
</div>
</div>拖拽事件
vue-drag-2.0 还提供了一些拖拽事件，我们可以通过在组件中定义这些事件来实现一些复杂的操作，比如判断拖拽的元素是否进入了某个区域。拖拽事件包括：
drag-start：在拖拽开始时触发的事件。drag-end：在拖拽结束时触发的事件。drag-enter：在拖拽元素进入另一个元素的区域时触发的事件。drag-leave：在拖拽元素离开另一个元素的区域时触发的事件。drag-over：当被拖动的元素在另一个元素上方时触发的事件。drag-drop：在被拖动的元素被放置到另一个元素中时触发的事件。
-- -------------------- ---- -------
---- -----------
-----------------------
-------------------
-----------------------
-----------------------
---------------------
----------------------
------
------在组件的 JS 代码中，定义这些事件的回调函数即可，如下所示：
-- -------------------- ---- -------
-------- -
----------- -
-------------------
--
--------- -
-------------------
--
----------- -
-----------------------
--
----------- -
-----------------------
--
---------- -
-----------------------
--
---------- -
----------------------
-
-排序操作
接下来我们看看如何使用 sortable 指令来实现排序操作。
最简单的排序
最简单的排序只需要将 v-draggable 替换为 v-sortable 即可：
<div v-sortable> <div>我可以拖拽排序 A</div> <div>我可以拖拽排序 B</div> <div>我可以拖拽排序 C</div> </div>
这样我们就可以拖动这三个元素来实现排序操作。
自定义排序句柄和排序范围
与 draggable 指令类似，sortable 也可以指定自定义的排序句柄和排序范围：
<div v-sortable sort-handle=".handle" sort-bounds=".container">
<div class="handle">拖拽句柄</div>
<div class="container">
<div>我可以拖拽排序 A</div>
<div>我可以拖拽排序 B</div>
<div>我可以拖拽排序 C</div>
</div>
</div>排序事件
排序也提供了一些事件，可以在组件中定义这些事件的回调函数来处理排序逻辑，排序事件包括：
sort-start：在排序开始时触发的事件。sort-end：在排序结束时触发的事件。sort-change：在排序元素位置变化后触发的事件。
<div v-sortable
@sort-start="sortStart"
@sort-end="sortEnd"
@sort-change="sortChange">
<div>我可以拖拽排序 A</div>
<div>我可以拖拽排序 B</div>
<div>我可以拖拽排序 C</div>
</div>在组件的 JS 代码中，定义这些事件的回调函数即可，如下所示：
-- -------------------- ---- -------
-------- -
----------- -
-------------------
--
--------- -
-------------------
--
------------ -
-----------------------
-
-缩放操作
最后我们看看如何使用 resizable 指令来实现缩放操作。
最简单的缩放
最简单的缩放只需要在 html 中指定 v-resizable 指令即可：
<div v-resizable> 我可以被缩放 </div>
缩放约束
我们可以使用 constraint 属性指定缩放约束，默认值为 null，即不限制缩放。
<div v-resizable constraint=".parent"> 我只能缩放到 parent 内部 <div class="parent" style="position: relative; height: 200px; width: 200px; border: 1px solid black;"></div> </div>
缩放事件
缩放也可以监听一些事件，如下所示：
<div v-resizable
@resize-start="resizeStart"
@resize-end="resizeEnd"
@resize="resize">
我可以被缩放
</div>这些事件包括：
resize-start：在缩放开始时触发的事件。resize-end：在缩放结束时触发的事件。resize：在缩放过程中触发的事件。
在组件的 JS 代码中，定义这些事件的回调函数即可，如下所示：
-- -------------------- ---- -------
-------- -
------------- -
-------------------
--
----------- -
-------------------
--
-------- -
------------------
-
-结语
到这里，我们已经学会了如何使用 vue-drag-2.0，尝试在自己的项目中应用它，相信它会帮助你快速实现拖拽、排序、缩放等操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567f081e8991b448e417a