// 這個(gè)助手方法下面會(huì)用到，用來獲取 css 相關(guān)屬性值
const getAttr = (obj, key) => (
  obj.currentStyle
  ? obj.currentStyle[key]
  : window.getComputedStyle(obj, false)[key]
);
const vDrag = {
  inserted(el) {
   /**
    * 這里是跟據(jù) dialog 組件的 dom 結(jié)構(gòu)來寫的
    * target: dialog 組件的容器元素
    * header：dialog 組件的頭部區(qū)域，也是就是拖拽的區(qū)域
    */
    const target = el.children[0];
    const header = target.children[0];
    // 鼠標(biāo)手型
    header.style.cursor = 'move';
    header.onmousedown = (e) => {
      // 記錄按下時(shí)鼠標(biāo)的坐標(biāo)和目標(biāo)元素的 left、top 值
      const currentX = e.clientX;
      const currentY = e.clientY
      const left = parseInt(getAttr(target, 'left'));
      const top = parseInt(getAttr(target, 'top'));
      document.onmousemove = (event) => {
        // 鼠標(biāo)移動(dòng)時(shí)計(jì)算每次移動(dòng)的距離，并改變拖拽元素的定位
        const disX = event.clientX - currentX;
        const disY = event.clientY - currentY;
        target.style.left = `${left + disX}px`;
        target.style.top = `${top + disY}px`;
        // 阻止事件的默認(rèn)行為，可以解決選中文本的時(shí)候拖不動(dòng)
        return false；
      }
      // 鼠標(biāo)松開時(shí)，拖拽結(jié)束
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  },
  // 每次重新打開 dialog 時(shí)，要將其還原
  update(el) {
    const target = el.children[0];
    target.style.left = '';
    target.style.top = '';
  },
  // 最后卸載時(shí)，清除事件綁定
  unbind(el) {
    const header = el.children[0].children[0];
    header.onmousedown = null;
  },
};
export default vDrap;

// ...
// 以上代碼省略
header.onmousedown = (e) => {
  // ...
  // 以上代碼省略
  // 分別計(jì)算四個(gè)方向的邊界值
  const minLeft = target.offsetLeft + parseInt(getAttr(target, 'width')) - 50;
  const maxLeft = parseInt(getAttr(document.body, 'width')) - target.offsetLeft - 50;
  const minTop = target.offsetTop;
  const maxTop = parseInt(getAttr(document.body, 'height'))
   - target.offsetTop - parseInt(getAttr(header, 'height'));
  document.onmousemove = (event) => {
    // 鼠標(biāo)移動(dòng)時(shí)計(jì)算每次移動(dòng)的距離，并改變拖拽元素的定位
    const disX = event.clientX - currentX;
    const disY = event.clientY - currentY;
    // 判斷左、右邊界
    if (disX < 0 && disX <= -minLeft) {
     target.style.left = `${left - minLeft)}px`;
    } else if (disX > 0 && disX >= maxLeft) {
     target.style.left = `${left + maxLeft}px`;
    } else {
     target.style.left = `${left + disX}px`;
    }
    // 判斷上、下邊界
    if (disY < 0 && disY <= -minTop) {
     target.style.top = `${top - minTop)}px`;
    } else if (disY > 0 && disY >= maxTop) {
     target.style.top = `${top + maxTop}px`;
    } else {
     target.style.top = `${top + disY}px`;
    }
    return false;
  };
}

<el-dialog v-drag title="對(duì)話框" :visible.sync="dialogVisible"></el-dialog>