JS实现页面底部元素高度拖拽调整功能运行异常问题求助

你的代码存在以下几个核心问题，直接导致拖拽效果异常：

• 拖拽触发区域层级不足：.draggerTop 没有设置层级，容易被窗口内的其他内容遮挡，导致点击无响应，是拖拽失效的核心原因之一。
• 未阻止事件默认行为：mousedown 触发时没有禁用浏览器默认的文本选择、元素拖拽行为，会干扰自定义拖拽逻辑，导致松开鼠标后仍保持拖拽状态的问题。
• 事件监听挂载对象错误：mouseup、mousemove 事件绑定在 body 上，当拖拽过程中鼠标移出 body 范围（比如快速拖动到浏览器工具栏、窗口外部），就无法触发对应事件，导致状态异常、拖拽中断卡顿。
• 缺少边界限制：没有设置最小高度限制，向上拖拽时窗口高度可能变为负值，触发样式异常。

修复后完整代码 #

JavaScript

var main = document.getElementById("dragWindow")
var dragTop = document.querySelector("#dragWindow .draggerTop")
var dragTopDown = false

dragTop.addEventListener("mousedown", function(e) {
  dragTopDown = true
  // 阻止默认行为和冒泡，避免浏览器原生逻辑干扰
  e.preventDefault()
  e.stopPropagation()
  // 临时禁用全局文本选择，避免拖拽时误选内容
  document.body.style.userSelect = 'none'
})

// 事件挂载到document上，确保鼠标移出body范围也能正常触发
document.addEventListener("mouseup", function() {
  if (dragTopDown) {
    dragTopDown = false
    // 恢复文本选择权限
    document.body.style.userSelect = 'auto'
  }
})

document.addEventListener("mousemove", function(e) {
  if (!dragTopDown) return
  // 计算窗口最终高度
  var targetHeight = window.innerHeight - e.clientY
  // 最小高度限制，避免窗口被拖到消失
  if (targetHeight < 50) targetHeight = 50
  main.style.top = `calc(100% - ${targetHeight}px)`
})

CSS

#dragWindow {
  background: lightgray;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: calc(100% - 150px);
  min-height: 50px;
}

#dragWindow .draggerTop {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: gray;
  cursor: ns-resize;
  /* 提高拖拽条层级，确保不会被内容遮挡 */
  z-index: 10;
}

HTML 部分无需修改

Page content here...

<div id="dragWindow">
  <div class="draggerTop"></div>
</div>

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