如何在可调整大小的拆分视图中限制左侧拖动范围？

要给左侧拖动设置停止阈值，只需在现有右侧限制逻辑基础上，添加左侧最小位置判断即可。先定义左侧面板的最小宽度阈值（比如minLeftPanelWidth），再限制拆分器的左边界不能小于该值，修改后的代码如下：

this.mousemoveListener = (e) => {
  if (this.resizing) {
    this.showResizeIndicator(e.pageX);
  }
};

showResizeIndicator(offsetLeft: number): void {
  if (this.resizeIndicator) {
    let positionLeft = offsetLeft - this.containerElement.getBoundingClientRect().left + this.containerElement.scrollLeft;
    
    // 左侧拖动限制：拆分器不能小于左侧面板的最小宽度
    const leftThreshold = this.minLeftPanelWidth; // 需提前定义左侧面板最小宽度变量
    // 右侧拖动限制：拆分器不能超过容器宽度减去右侧面板最小宽度
    const rightThreshold = this.containerElement.getBoundingClientRect().width - this.minTableWidth;

    // 同时限制左右边界，确保拆分器在合法范围内
    positionLeft = Math.max(leftThreshold, Math.min(positionLeft, rightThreshold));

    this.resizeIndicator.style.left = positionLeft + 'px';
    this.resizeIndicator.style.height = this.containerElement.offsetHeight + 'px';
    this.resizeIndicator.style.display = 'block';
  }
}

get containerElement() {
  return this.parentDirective.element.nativeElement;
}

关键修改说明 #

• 新增左侧阈值变量：leftThreshold对应左侧面板的最小宽度，你需要根据业务需求给这个变量赋值（例如this.minLeftPanelWidth = 200;，表示左侧面板至少保留200px宽度）
• 双边界限制逻辑：通过Math.max和Math.min的嵌套调用，同时约束拆分器的左右移动范围，既防止左侧面板被拖得过窄，也保留原有右侧面板的最小宽度限制
• 兼容原有逻辑：仅新增左侧限制代码，不改动原有右侧限制的实现逻辑

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