带有调整大小光标的可调整大小的窗格无法按预期运行

Question

我正在尝试在 HTML 中并排创建两个可调整大小的窗格，用户可以通过拖动调整大小手柄来调整每个窗格的大小。我添加了 CSS 以在将鼠标悬停在手柄上时显示调整大小光标，并实现了 JavaScript 以在用户拖动手柄时更新窗格的宽度。但是，虽然当我将鼠标悬停在手柄上时会出现调整大小光标，但拖动它似乎对窗格的大小没有任何影响。

这是代码：

const resizeHandle1 = document.querySelector("#pane1 .resize-handle");
const resizeHandle2 = document.querySelector("#pane2 .resize-handle");
const pane1 = document.getElementById("pane1");
const pane2 = document.getElementById("pane2");
let isResizing = false;

resizeHandle1.addEventListener("mousedown", (e) => {
  isResizing = true;
  document.addEventListener("mousemove", resizePane1);
  document.addEventListener("mouseup", stopResize);
});

resizeHandle2.addEventListener("mousedown", (e) => {
  isResizing = true;
  document.addEventListener("mousemove", resizePane2);
  document.addEventListener("mouseup", stopResize);
});

function resizePane1(e) {
  if (isResizing) {
    const offsetRight = document.body.offsetWidth - e.clientX;
    pane1.style.width = `calc(100% - ${offsetRight}px)`;
  }
}

function resizePane2(e) {
  if (isResizing) {
    const offsetLeft = e.clientX;
    pane2.style.width = `calc(${offsetLeft}px - 10px)`;
  }
}

function stopResize() {
  isResizing = false;
  document.removeEventListener("mousemove", resizePane1);
  document.removeEventListener("mousemove", resizePane2);
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  display: flex;
  height: 100%;
}

.pane {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.resize-handle {
  position: absolute;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  background: #ddd;
  top: 0;
  right: -5px;
}

<div class="container">
  <div id="pane1" class="pane">
    <div class="resize-handle"></div>
    Pane 1
  </div>
  <div id="pane2" class="pane">
    <div class="resize-handle"></div>
    Pane 2
  </div>
</div>

Answer 1

使用 js 事件删除第二个

<div class="resize-handle"></div>

 以及 .pane 中的“flex: 1”