js拖動調整元素寬度

dom結構，一個盒子中包含左中右是三個元素，resize為拖動元素，左側固定寬度，右側元素flex:1

css部分，拖動元素的樣式，左右兩邊按實際情況修改

js部分：

const handleResize = (leftMinWidth = 0, rightMinWidth = 200) => {
  const leftDom = document.getElementById('leftDom'),
    resizeDom = document.getElementById('resizeDom'),
    boxDom = document.getElementById('conbody'),
    rightDom = document.getElementById('rightDom');
  resizeDom.onmousedown = e => {
    const startX = e.clientX; // 記錄座標起始位置
    leftDom.left = leftDom.offsetWidth; // 左邊元素起始寬度
    document.onmousemove = e => {
      const endX = e.clientX; // 滑鼠拖動的終止位置
      let moveLen = leftDom.left + (endX - startX); // 移動的距離 =  endX - startX，左邊區域最後的寬度 = resizeDom.left + 移動的距離
      const maxWidth = boxDom.clientWidth - resizeDom.offsetWidth; // 左右兩邊區域的總寬度 = 外層容器寬度 - 中間區域拖拉框的寬度
      // 限制左邊區域的最小寬度為 leftMinWidth
      if (moveLen < leftMinWidth) {
        moveLen = leftMinWidth;
      }
      // 右邊區域最小寬度為 rightMinWidth
      if (moveLen > maxWidth - rightMinWidth) {
        moveLen = maxWidth - rightMinWidth;
      }
      leftDom.style.width = (moveLen / maxWidth) * 100 + '%'; // 設定左邊區域的寬度，透過換算為百分比的形式，實現窗體放大縮小自適應
      rightDom.style.width = ((maxWidth - moveLen) / maxWidth) * 100 + '%'; // 右邊區域 = 總大小 - 左邊寬度 - 拖動條寬度
    };
    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
    };
    return false;
  };
};

在此呼叫該方法。