/**
 * 自定义拖拽指令
 * 生命周期指令包括：
 *  bind     第一次绑定在元素上时调用、只调用一次
 *  inserted 元素被插入父节点时调用、
 *  update   
 *  componentUpdate  指令所在组件的 VNode 及其子 VNode 全部更新后调用。
 *  unbind   解绑时调用
 *
 * mouseEvent类型的事件有：
 *  client   提供事件发生时的应用客户端区域的水平坐标，也就是无论是否滚动都会，最上方都是0
 *  ctrlKey  当 ctrl 键被按下，返回 true，否则返回 false。
 *  layer    往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角
 *  metaKey  mac为Mata，windows为windows键
 *  movement 相当于上一次mouseMove的偏移量
 *  offset   事件对象与目标节点的内填充边（padding edge）的偏移量。
 *  page     相对于文档的坐标，如果向上滚动了200px，点击最上方的值为200
 *  screen   提供鼠标在全局（屏幕）中的坐标（偏移量）。
 */

export default {
  install(Vue) {
    Vue.directive("dragme", {
      // 指令全局命名为v-dragme
      inserted(el) {
        el.onmousedowm = function (ev) {
          // 获取鼠标按下去时候变量
          const disX = ev.clientX - el.offsetLeft;
          const disY = ev.clientY - el.offsetTop;
          el.onmousemove = function (ev) {
            const l = ev.clientX - disX;
            const t = ev.clientY - disY;
            // 实时设置元素位置
            el.style.left = l + "px";
            el.style.top = t + "px";
            // 获取鼠标移动时的变量
          };
          el.onmouseup = function () {
            // 获取鼠标松开时,销毁所有变量
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    });
  },
};
