dom在浏览器窗口内拖动的指令。

<template>
    <div v-drop="100"></div>
</template>

// 组件内自定义指令
  directives: {
    drop: {
      inserted: (el, bind, dom) => {
        // 初始化
        el.style.right = 0;
        el.style.bottom = 0;
        el.style.position = "fixed";
        el.style.overflow = "hidden";
        el.style.zIndex = bind.value;
        // 窗口是否前排
        window.sessionStorage.setItem("index", bind.value);
        let position = {};
        // 拖动后设置当前位置
        let setMove = e => {
          let x = e.clientX - position.x,
            y = e.clientY - position.y;
          el.style.right = "auto";
          el.style.bottom = "auto";
          el.style.left = x + "px";
          el.style.top = y + "px";
        };
        // 开始拖动
        el.onmousedown = function(e) {
          e.preventDefault();
          e.stopPropagation();
          // 获取鼠标距离元素boder位置，移动位置减去距离元素的位置，就是拖动结束的位置，平滑拖动效果
          position = {
            x: e.clientX - el.offsetLeft,
            y: e.clientY - el.offsetTop
          };
          let i = window.sessionStorage.getItem("index") * 1 + 1;
          window.sessionStorage.setItem("index", i);
          el.style.zIndex = i;
          // 拖动过程中
          document.onmousemove = function(event) {
            setMove(event);
          };
          // 拖动结束释放鼠标
          document.onmouseup = function(event) {
            setMove(event);
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  },