Widget容器内拖拽器跟随鼠标Y轴位置的实现问题排查

问题根源 #

你当前用event.pageY计算拖拽器的top值，这个值是鼠标相对于整个文档顶部的位置，但拖拽器是基于相对定位的Widget容器做绝对定位的，两者坐标系不匹配，导致位置计算错误。

修正方案 #

需要计算鼠标在Widget容器内的Y轴偏移量，再以此设置拖拽器的top值，同时确保拖拽器不会超出容器范围：

rh.addEventListener('mouseover', (event) => {
  const draggerElement = event.target.parentNode.querySelector('.widget-dragger');
  // 获取拖拽器的定位父容器（即相对定位的Widget容器）
  const widgetContainer = draggerElement.offsetParent;
  
  if (draggerElement.style.opacity !== '1') {
    // 获取容器相对于视口的位置与尺寸信息
    const containerRect = widgetContainer.getBoundingClientRect();
    // 计算鼠标在容器内的Y坐标（视口内鼠标位置 - 容器顶部的视口位置）
    const mouseYInContainer = event.clientY - containerRect.top;
    // 拖拽器自身高度的一半，用于实现鼠标垂直居中对齐
    const draggerHalfHeight = draggerElement.offsetHeight / 2;
    // 限制top值范围，避免拖拽器超出容器上下边界
    let finalTop = mouseYInContainer - draggerHalfHeight;
    finalTop = Math.max(0, Math.min(finalTop, containerRect.height - draggerElement.offsetHeight));
    
    draggerElement.style.top = `${finalTop}px`;
    draggerElement.style.opacity = '1';
  }
});

关键说明 #

• draggerElement.offsetParent：直接获取拖拽器的定位父容器，避免DOM查询路径出错
• getBoundingClientRect()：获取容器在视口中的精确位置和尺寸，不受文档滚动状态影响
• event.clientY：鼠标相对于视口顶部的位置，比pageY更适配当前场景（无需额外处理文档滚动偏移）
• 边界限制逻辑：通过Math.max和Math.min确保拖拽器始终处于容器范围内，不会出现超出顶部或底部的情况

相关截图 #

示例效果：

rh元素结构：

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