vue3自定义全局拖拽指令（设置边界）

指令的生命周期

1. created：在绑定元素的 attribute 或事件监听器被应用之前调用；
2. beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
3. mounted：在绑定元素的父组件被挂载后调用；
4. beforeUpdate：在更新包含组件的 VNode 之前调用；
5. updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
6. beforeUnmount：在卸载绑定元素的父组件之前调用；
7. unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

生命周期钩子参数详解

1. 第一个 el 当前绑定的DOM 元素
2. 第二个 binding

• instance：使用指令的组件实例。
• value：传递给指令的值。例如，在 v-my-directive=“1 + 1” 中，该值为 2。
• oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否有更改都可用。
• arg：传递给指令的参数(如果有的话)。例如在 v-my-directive:foo 中，arg 为 “foo”。
• modifiers：包含修饰符(如果有的话) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}。
• dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中

3. 第三个 vNode 当前元素的虚拟DOM 也就是Vnode
4. 第四个 prevNode 上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用

函数简写

在 mounted 和 updated 时触发相同行为，而不关心其他的钩子函数。那么你可以通过将这个函数模式实现

import {
    Directive, DirectiveBinding } from 'vue'
...
// 注意局部指令命名以v开头
const vMove: Directive = (el, binding: DirectiveBinding) => {
   
   ...
}
...

自定义全局拖拽指令

directive.ts

import {
    Directive, DirectiveBinding } from "vue"

const vMove: Directive<any, void> = (el: HTMLElement, bind