＜拖拽移动案例＞之Vue设置全局指令

// 哪个盒子需要移动给哪个盒子的标签添加v-move
Vue.directive("move", {
  // inserted指令所在标签,被插入网页就触发
  inserted(el) {
    // el是需要拖动盒子的标签
    let father = el.parentNode;
    // 获取当前页面宽度减去盒子宽高度
    let mx_ = father.offsetWidth - el.offsetWidth;
    let my_ = father.offsetHeight - el.offsetHeight;
    el.onmousedown = function (e) {
      // 鼠标点击里面盒子获取x，y坐标
      let x = e.offsetX;
      let y = e.offsetY;
      father.onmousemove = function (e) {
        // 点击盒子里面触发鼠标移动事件获取x,y坐标
        let mx = e.clientX - x;
        let my = e.clientY - y;
        // 禁止移动盒子超出页面
        mx = mx > mx_ ? mx_ : mx;
        my = my > my_ ? my_ : my;
        mx = mx < 0 ? 0 : mx;
        my = my < 0 ? 0 : my
        // 赋值
        el.style.left = mx + 'px';
        el.style.top = my + 'px';
      }
    }
    // 鼠标松开
    el.onmouseup = function() {
      father.onmousemove = null;
    }
  },
});
// 复制直接拿走就用