如何限制报表设计器面板最小高度并转为原生JavaScript实现

场景说明 #

JavaScript报表设计器的Band包含可在设计器中修改的绝对定位字段。Band高度支持鼠标拖拽调整，但原有基于jQuery UI的代码使用固定值80设置minHeight，无法适应字段动态变化（例如删除Field2后，最小高度需要相应缩小）。需实现以下需求：

1. 调整大小开始时动态计算minHeight，确保其不小于最后一个字段的top位置；
2. 用原生JavaScript重构原jQuery及jQuery UI代码。

HTML代码 #

<div class='designer-panel-body' style='height:100px'>
  <div class='designer-label' style='top:10px'>
    Field1
  </div>
  <div class='designer-label' style='top:60px; left:20px'>
    Field2
  </div>
</div>

CSS代码 #

.designer-panel-body {
  border: solid 1px;
  position: relative; /* 确保子元素绝对定位基于当前容器 */
  overflow: hidden;
}

.designer-label {
  position: absolute;
}

/* 拖拽手柄样式 */
.resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #ccc;
  cursor: s-resize;
}

原生JavaScript实现代码 #

const panel = document.querySelector('.designer-panel-body');

// 添加底部拖拽手柄
const handle = document.createElement('div');
handle.className = 'resize-handle';
panel.appendChild(handle);

let startY, startHeight, minHeight;

// 动态计算最小高度：取所有字段top值的最大值，添加余量避免遮挡
function calculateMinHeight() {
  const labels = panel.querySelectorAll('.designer-label');
  if (labels.length === 0) return 40; // 无字段时的默认最小高度
  
  let maxTop = 0;
  labels.forEach(label => {
    const top = parseInt(label.style.top) || 0;
    maxTop = Math.max(maxTop, top);
  });
  return maxTop + 20;
}

// 开始拖拽调整
handle.addEventListener('mousedown', (e) => {
  e.preventDefault();
  startY = e.clientY;
  startHeight = panel.offsetHeight;
  minHeight = calculateMinHeight();
  
  document.addEventListener('mousemove', onResize);
  document.addEventListener('mouseup', stopResize);
});

// 拖拽过程中调整高度
function onResize(e) {
  const deltaY = e.clientY - startY;
  let newHeight = startHeight + deltaY;
  // 限制高度不低于计算出的最小高度
  newHeight = Math.max(newHeight, minHeight);
  panel.style.height = `${newHeight}px`;
}

// 结束拖拽
function stopResize() {
  document.removeEventListener('mousemove', onResize);
  document.removeEventListener('mouseup', stopResize);
}

关键逻辑说明 #

• 动态计算最小高度：calculateMinHeight方法遍历所有字段，获取最大的top值并添加20px余量，确保调整高度时不会遮挡最后一个字段；
• 原生拖拽实现：通过自定义拖拽手柄，监听mousedown、mousemove、mouseup事件，实现仅底部拖拽的垂直大小调整；
• 高度限制：拖拽过程中实时校验新高度，确保其不低于动态计算出的最小高度。

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