如何实现多列宽度调整：鼠标拖动border时的宽度增减与方向判断

要实现拖动黑色边框调整左右列宽，需要借助mousedown、mousemove、mouseup三个事件的配合，核心是记录初始状态并计算鼠标偏移量，以此调整列宽并判断移动方向。

完整代码实现 #

HTML

<div class="col one" id="col1">
    1
</div>
<div class="border" id="border1">
    &nbsp;
</div>
<div class="col two" id="col2">
    2
</div>

CSS

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.col,.border{
  display:inline-block;
  position: relative;
  padding-bottom:100px;
  box-sizing: border-box; /* 避免内边距干扰宽度计算 */
}
.one{
  background-color: #2a85ff;
  width:18%;
}
.two{
  background-color: #83bf6e;
  width:18%;
}
.border{
  background-color:#000000;
  width:5px;
  cursor:col-resize; /* 适配列宽调整的光标样式 */
  vertical-align: top; /* 对齐列与边框的顶部 */
}

JavaScript

const border = document.getElementById('border1');
const col1 = document.getElementById('col1');
const col2 = document.getElementById('col2');

border.addEventListener('mousedown', startDrag);

function startDrag(e) {
  // 记录初始状态：鼠标X坐标、两列的当前宽度（转为数值）
  const startX = e.clientX;
  const col1Width = parseFloat(window.getComputedStyle(col1).width);
  const col2Width = parseFloat(window.getComputedStyle(col2).width);
  const parentWidth = col1.parentElement.offsetWidth; // 获取父容器宽度，用于百分比转换

  // 绑定移动和结束事件
  document.addEventListener('mousemove', handleDrag);
  document.addEventListener('mouseup', endDrag);

  function handleDrag(e) {
    // 计算鼠标移动偏移量
    const deltaX = e.clientX - startX;
    // 转换为百分比偏移（适配列宽的百分比单位）
    const deltaPercent = (deltaX / parentWidth) * 100;

    // 判断拖动方向：deltaX>0向右，deltaX<0向左
    const direction = deltaX > 0 ? '向右' : '向左';
    // 可根据方向添加额外逻辑，比如日志输出
    // console.log(`拖动方向：${direction}`);

    // 计算新宽度，限制最小10%避免列消失
    const newCol1Width = Math.max(10, (col1Width / parentWidth) * 100 + deltaPercent);
    const newCol2Width = Math.max(10, (col2Width / parentWidth) * 100 - deltaPercent);

    // 应用新宽度
    col1.style.width = `${newCol1Width}%`;
    col2.style.width = `${newCol2Width}%`;
  }

  function endDrag() {
    // 移除事件监听，结束拖动流程
    document.removeEventListener('mousemove', handleDrag);
    document.removeEventListener('mouseup', endDrag);
  }
}

关键逻辑说明 #

1. 初始状态记录：mousedown触发时，记录鼠标初始X坐标、两列当前宽度，以及父容器宽度（用于将像素偏移转换为百分比）。
2. 方向判断：通过当前鼠标X - 初始鼠标X得到deltaX，正数代表鼠标向右移动，负数代表向左移动，直接以此判断拖动方向。
3. 宽度调整：将像素偏移量转为百分比，加到左列宽度的同时从右列宽度扣除对应值，同时限制最小宽度防止列被拖至消失。
4. 拖动终止：mouseup触发时移除mousemove和mouseup的监听，避免后续鼠标移动继续触发列宽调整。

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