如何用原生JavaScript实现固定增量的垂直可调整大小div

问题根源 #

你原来的代码始终基于页面加载时的初始高度和鼠标位置计算新高度，当按10px取整时，鼠标实际移动的距离和div高度变化的距离会产生偏差，随着拖拽次数增加，这个偏差会越来越大，最终导致鼠标和div底部脱节。

修复思路 #

我们需要在每次拖拽过程中记录鼠标实际位移与网格对齐后位移的偏差，并在下一次计算时补上这个偏差，确保div底部始终对齐到鼠标对应的网格位置，同时让鼠标看起来一直贴合div底部。

完整修复代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Resizable Div with Snap Grid</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="resizable">
    <div class="ns-resize">
      <span>&nbsp;</span>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

.resizable {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: absolute;
}
.container {
  position: relative;
}
.ns-resize {
  position: absolute;
  bottom: 0;
  cursor: ns-resize;
  width: 100%;
  height: 10px; /* 给拖拽区域加高度，提升点击体验 */
  background: rgba(0,0,0,0.1); /* 可选：可视化拖拽区域 */
}

JavaScript

const divElement = document.querySelector('.ns-resize');
const element = document.querySelector('.resizable');

divElement.onmousedown = function(mouseDownEvent) {
  mouseDownEvent.preventDefault();
  
  // 每次按下鼠标时，重新获取当前元素的高度和鼠标初始位置
  let currentHeight = parseFloat(getComputedStyle(element).height);
  let startY = mouseDownEvent.pageY;
  let offset = 0; // 记录鼠标位移与网格对齐位移的偏差

  function resize(mouseMoveEvent) {
    const step = 10; // 固定调整间隔10px
    // 计算总位移：鼠标移动距离 + 上一次的偏差，确保位移连续
    const totalDelta = mouseMoveEvent.pageY - startY + offset;
    // 将位移对齐到10px的整数倍
    const snappedDelta = Math.round(totalDelta / step) * step;
    // 计算新高度
    const newHeight = currentHeight + snappedDelta;

    // 限制高度范围，避免超出边界
    if (newHeight > 15 && newHeight < 900) {
      element.style.height = `${newHeight}px`;
      divElement.innerHTML = `${newHeight}px`;
      // 更新偏差，让下一次计算基于当前对齐后的位置
      offset = totalDelta - snappedDelta;
    }
  }

  function stopResize() {
    document.removeEventListener('mousemove', resize);
    document.removeEventListener('mouseup', stopResize);
  }

  document.addEventListener('mousemove', resize);
  document.addEventListener('mouseup', stopResize);
}

关键修改点 #

1. 动态获取基准值：在mousedown事件中实时获取当前元素高度和鼠标初始位置，替代页面加载时的固定初始值，确保每次拖拽都基于最新状态。
2. 偏差补偿机制：通过offset变量记录鼠标实际移动与网格对齐位移的差值，让后续拖拽自动补上偏差，保证鼠标始终贴合div底部。
3. 网格对齐逻辑：使用Math.round(totalDelta / step) * step实现位移的10px整数倍对齐，精准控制高度调整间隔。
4. 拖拽区域优化：给拖拽条添加高度和背景，提升操作的直观性和易用性。

这样修改后，你就能实现按10px固定间隔调整div高度，同时鼠标指针会一直贴合div底部，不会出现脱节的问题。

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