Vue简单实现自定义拖拽

我们在写Vue项目的时候有时候会遇到一些拖拽的问题，但是Vue又不直接操作底层DOM，这个时候我们就需要用到自定义指令了来对底层DOM进行操作。

先来看看官方的解释：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。官网解释，这里就不多做介绍了。大家可自行去学习。

第一步

npm i lib-drag -S 

第二步

在入口文件中引入 import drag from “lib-drag” Vue.directive('自定义指令ID',drag) 

第三步

在页面中通过<div v-自定义指令ID=‘这里需要有个布尔值’> 为true时盒子全部可以拖拽，为false时只有顶部可以拖拽。 父盒子一定要有高度！！！！！