js实现一个大盒子高度为800，大子里面有2个小盒子Y轴排列，高度都为400，宽度100%，当拖动下盒子时，大盒子高度不变，下盒子高度变小，上盒子高度变大，当向上拖动盒子时，下盒子高度增加，上盒子高度

本文链接：https://blog.csdn.net/qq_37547964/article/details/137788577

要实现这个功能，你需要使用JavaScript（比如原生的方法或配合jQuery等库）来监听鼠标事件，并相应地调整两个子盒子的高度。同时，你需要确保大盒子的高度保持不变。下面是一个使用原生JavaScript实现的简单示例：

首先，是HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Boxes</title>
<style>
  #bigBox {
    position: relative;
    height: 800px;
    border: 1px solid black;
    overflow: hidden;
  }
  .smallBox {
    position: absolute;
    width: 100%;
    background-color: lightblue;
    transition: height 0.3s; /* 平滑过渡效果 */
  }
  #topBox {
    height: 400px;
    top: 0;
  }
  #bottomBox {
    height: 400px;
    bottom: 0;
    cursor: ns-resize; /* 显示可调整大小的光标 */
  }
</style>
</head>
<body>

<div id="bigBox">
  <div id="topBox" class="smallBox"></div>
  <div id="bottomBox" class="smallBox"></div>
</div>

<script>
  // JavaScript代码将放在这里
</script>

</body>
</html>

接下来是JavaScript代码：

document.addEventListener('DOMContentLoaded', function() {
  var bigBox = document.getElementById('bigBox');
  var topBox = document.getElementById('topBox');
  var bottomBox = document.getElementById('bottomBox');
  var startY = 0;
  var isResizing = false;

  // 监听鼠标按下事件
  bottomBox.addEventListener('mousedown', function(e) {
    isResizing = true;
    startY = e.clientY; // 记录鼠标按下时的Y轴位置
  });

  // 监听鼠标移动事件
  document.addEventListener('mousemove', function(e) {
    if (isResizing) {
      var deltaY = e.clientY - startY; // 计算鼠标移动的Y轴距离
      var newTopBoxHeight = Math.max(0, 400 - deltaY); // 确保上盒子高度不会小于0
      var newBottomBoxHeight = 400 + deltaY; // 下盒子高度随鼠标移动而变

      // 调整盒子高度
      topBox.style.height = newTopBoxHeight + 'px';
      bottomBox.style.height = newBottomBoxHeight + 'px';

      // 更新startY以准备下一次计算
      startY = e.clientY;
    }
  });

  // 监听鼠标松开事件
  document.addEventListener('mouseup', function() {
    isResizing = false; // 停止调整大小
  });
});