可调整大小面板：调整光标显示正常但拖拽调整无效果

问题根源 #

1. Flex布局冲突：.pane的flex:1属性会让Flex容器自动分配空间，覆盖手动设置的width值，导致面板尺寸无法修改。
2. 手柄位置错误：两个调整手柄都设置为right:-5px，导致pane2的手柄与pane1的手柄重叠，无法正常触发拖拽。
3. 拖拽逻辑缺陷：直接使用clientX计算宽度会导致面板跳动，且未记录初始拖拽状态，同时鼠标抬起时错误移除两个拖拽事件，影响后续操作。

修复步骤 #

1. 调整Flex布局属性

修改.pane的Flex属性，允许手动设置宽度：

.pane {
  /* 替换原flex:1，允许手动控制宽度 */
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
}

• flex: 0 0 50%表示初始宽度50%，不允许自动扩展或收缩，确保手动设置的width生效。

2. 修正调整手柄位置

给pane2的手柄单独设置左侧位置：

#pane2 .resize-handle {
  left: -5px;
  right: auto;
}

这样两个手柄分别位于面板的右侧（pane1）和左侧（pane2），不会重叠。

3. 优化拖拽逻辑

• 记录拖拽初始状态（鼠标位置、面板初始宽度），避免面板跳动
• 阻止mousedown默认行为，防止文本选中干扰
• 鼠标抬起时仅移除当前对应的拖拽事件

完整修复代码 #

HTML

<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>

CSS

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

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

.pane {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid #eee;
}

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

#pane2 .resize-handle {
  left: -5px;
  right: auto;
}

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;
let startX, startWidth;

function startResize(e, pane) {
  isResizing = true;
  startX = e.clientX;
  startWidth = parseInt(getComputedStyle(pane).width);
  document.addEventListener("mousemove", (evt) => resizePane(evt, pane));
  document.addEventListener("mouseup", stopResize);
  e.preventDefault();
}

function resizePane(e, pane) {
  if (!isResizing) return;
  const deltaX = e.clientX - startX;
  const newWidth = startWidth + deltaX;
  if (newWidth > 50) {
    pane.style.width = `${newWidth}px`;
  }
}

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

resizeHandle1.addEventListener("mousedown", (e) => startResize(e, pane1));
resizeHandle2.addEventListener("mousedown", (e) => startResize(e, pane2));

内容的提问来源于stack exchange，提问作者Jenad Morgh