// 這個助手方法下面會用到，用來獲取 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];
    // 鼠標手型
    header.style.cursor = 'move';
    header.onmousedown = (e) => {
      // 記錄按下時鼠標的坐標和目標元素的 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) => {
        // 鼠標移動時計算每次移動的距離，并改變拖拽元素的定位
        const disX = event.clientX - currentX;
        const disY = event.clientY - currentY;
        target.style.left = `${left + disX}px`;
        target.style.top = `${top + disY}px`;
        // 阻止事件的默認行為，可以解決選中文本的時候拖不動
        return false；
      }
      // 鼠標松開時，拖拽結(jié)束
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  },
  // 每次重新打開 dialog 時，要將其還原
  update(el) {
    const target = el.children[0];
    target.style.left = '';
    target.style.top = '';
  },
  // 最后卸載時，清除事件綁定
  unbind(el) {
    const header = el.children[0].children[0];
    header.onmousedown = null;
  },
};
export default vDrap;

// ...
// 以上代碼省略
header.onmousedown = (e) => {
  // ...
  // 以上代碼省略
  // 分別計算四個方向的邊界值
  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) => {
    // 鼠標移動時計算每次移動的距離，并改變拖拽元素的定位
    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="對話框" :visible.sync="dialogVisible"></el-dialog>