vue封装弹窗元素拖动指令

项目开发过程中我们通常会遇到需要到一些弹窗鼠标可以随意拖动位置去放置，vue里面直接通过封装对应的指令即可，于是封装了一个出来，希望可以用到。

Vue.directive('draggable-dom', draggableDom);

组件节点添加对应指令就可以

v-draggable-dom="{zIndex: 999, top: 10, left: 50}"

<div class="search-bar" ref="seachBar" :style="{ width }" v-draggable-dom="{zIndex: 999, top: 10, left: 50}">

指令代码：

/**
 * 拖拽元素指令
 * @param { Number } top  // 初始位置top 坐标 默认为元素本身的top
 * @param { Number } left  // 初始位置left 坐标 默认为元素本身的left
 * @param { Number } zIndex  // 层级，默认为9999
 */
export const draggableDom = {
  bind(el, binding, vnode) {
    // 初始化变量
    let startX = 0; // 鼠标按下时的初始 X 坐标
    let startY = 0; // 鼠标按下时的初始 Y 坐标
    let initialLeft = 0; // 元素的初始 left 值
    let initialTop = 0; // 元素的初始 top 值
    let isDragging = false