如何实现用户拖动调整两个并排div的宽度（宽度此消彼长）

实现思路 #

通过添加一个拖拽手柄，结合Flex布局和鼠标事件监听，实现两个Div宽度的动态调整，确保总宽度始终保持100%。

修改后的HTML结构 #

在两个Div之间新增拖拽手柄元素：

<div class="container">
  <div class="left"></div>
  <div class="resizer"></div>
  <div class="right"></div>
</div>

调整后的CSS样式 #

用Flex布局替代原有的float，方便控制宽度占比：

.container {
  display: flex;
  width: 100%;
  min-height: 50px;
}

.left {
  flex: 49%; /* 初始宽度对应原49% */
  min-width: 20%; /* 可选：限制最小宽度，避免被拖到消失 */
  border: 2px dashed #f0f;
}

.right {
  flex: 51%; /* 补全剩余宽度，保证总和100% */
  min-width: 20%;
  border: 2px dashed #00f;
}

.resizer {
  width: 4px;
  background-color: #666;
  cursor: col-resize; /* 显示拖拽光标提示 */
  margin: 0 2px;
}

核心JavaScript逻辑 #

监听鼠标事件，计算拖拽距离并动态调整左右Div的宽度占比：

const resizer = document.querySelector('.resizer');
const leftDiv = document.querySelector('.left');
const rightDiv = document.querySelector('.right');
const container = document.querySelector('.container');

let isResizing = false;
let startX = 0;
let startLeftWidth = 0;

// 开始拖拽
resizer.addEventListener('mousedown', (e) => {
  isResizing = true;
  startX = e.clientX;
  startLeftWidth = leftDiv.getBoundingClientRect().width;
  
  // 绑定全局事件，避免鼠标移出手柄后中断拖拽
  document.addEventListener('mousemove', handleResize);
  document.addEventListener('mouseup', stopResize);
  
  e.preventDefault(); // 阻止默认选中文本行为
});

// 拖拽中调整宽度
function handleResize(e) {
  if (!isResizing) return;
  
  const containerWidth = container.getBoundingClientRect().width;
  const deltaX = e.clientX - startX;
  const newLeftWidth = startLeftWidth + deltaX;
  const leftPercent = (newLeftWidth / containerWidth) * 100;
  
  // 限制在最小宽度范围内
  if (leftPercent >= 20 && leftPercent <= 80) {
    leftDiv.style.flex = `${leftPercent}%`;
    rightDiv.style.flex = `${100 - leftPercent}%`;
  }
}

// 结束拖拽
function stopResize() {
  isResizing = false;
  document.removeEventListener('mousemove', handleResize);
  document.removeEventListener('mouseup', stopResize);
}

方案特点 #

1. 纯原生JS实现，无需依赖任何框架
2. Flex布局保证总宽度始终为100%，避免布局错乱
3. 支持设置最小宽度，防止某一侧被拖至消失
4. 拖拽手柄提供明确的交互提示，用户体验友好

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