关于Vue 自定义指令实现元素拖动的详细代码

昨天在做的一个功能时，同时弹出多个框展示多个表格数据。

这些弹出框可以自由拖动。单独的拖动好实现，给元素绑定 mousedowm 事件。

这里就想到了 vue 里面自定义指令来实现。

一、自定义指令

在使用自定义指令之前，先对自定义指令有一定的了解。从以下几个方面着手：

1、自定义指令定义范围

全局注册和组件内注册（注册的范围根据实际业务需求来）

// 注册一个全局指令，可以在任何组件使用Vue.directive('focus',{    // 当被绑定的元素插入 DOM 时    inserted: function(el){        // 聚焦元素        el.focus()    }})// 在组件内注册，只能当前组件使用directives:{    focus:{        inserted: function(el){            el.focus()        }    }}// 使用<inpu子 VNode 全部更新后调用unbind：只调用一次，指令与元素解绑时调用
3、函数参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOMbinding：一个对象，包含以下 property：
name：指令名
value：指令绑定的值
oldValue：指令绑定的前一个值
expression：字符串形式的指令表达式
arg：传给指令的参数
modifiers：一个包含修饰符的对象
vnode：Vue 编译生成的虚拟节点oldVnode：上一个虚拟节点
二、拖动实现
拖动的实现：给目标 Element 注册 mousedown 事件，在这个事件里面再对 document 的 mousemove 和 mouseup 注册。
代码如下：
directives: {    drag: {      // 拖动标题栏，让父元素改变位置，这里所以选择 inwww.easck.comserte的      inserted: (el) => {        const target = el.parentElement        el.onmousedown = (e) => {          const disX = e.pageX - target.offsetLeft          const disY = e.pageY - target.offsetTop          document.onmousemove = (de) => {            target.style.left = de.pageX - disX + 'px'            target.style.top = de.pageY - disY + 'px'          }          document.onmouseup = (de) => {            document.onmousemove = document.onmouseup = null          }        }      }    }  }
在需要的 Element 上面使用 v-drag 即可。