您如何允许用户手动调整 <div> 元素的垂直大小？

Question

我在另一个 div 中有 2 个 div 元素，它们每个都显示为一个块。所以div1就在div2 的正上方。

我想添加某种用户可以单击并拖动的“条”，最终会调整div2 的大小，而div1将自动调整相同的大小。

div1和div2的父级具有 style:display:flex;flex-direction:column;并且div1具有，flex-grow:1因此它会自动调整大小。

我希望调整大小栏是这样的：

我如何添加这样的东西？还有什么方法可以改变它在 CSS 中的外观？

Answer 1

在您的列 flexbox 中，您可以resize在其中一个 div 上使用并使用flex-growset to one自动调整另一个 -缺点是滑块不是很可定制：

• 添加resize: vertical到弹性项目之一
• 添加flex: 1到另一个 flex 项目（这样这个flex 项目将在调整大小时自动调整以响应另一个 flex 项目的高度变化）

body {
  margin: 0;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.block {
  height: 50%;
}

.block-1 {
  background-color: red;
  resize: vertical; /* resize vertical */
  overflow: auto; /* resize works for overflow other than visible */
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
}

<div class="outer">
  <div class="block block-1">
    Block 1
  </div>
  <div class="block block-2">
    Block 2
  </div>
</div>

解决方案

相反，你可以使用mousedown监听器注册一个mousemove用于更新听众block-1的高度（和复位的mouseup情况下） -见下面的演示：

let block = document.querySelector(".block-1"),
  slider = document.querySelector(".slider");

// on mouse down (drag start)
slider.onmousedown = function dragMouseDown(e) {
  // get position of mouse
  let dragX = e.clientY;
  // register a mouse move listener if mouse is down
  document.onmousemove = function onMouseMove(e) {
    // e.clientY will be the position of the mouse as it has moved a bit now
    // offsetHeight is the height of the block-1
    block.style.height = block.offsetHeight + e.clientY - dragX + "px";
    // update variable - till this pos, mouse movement has been handled
    dragX = e.clientY;
  }
  // remove mouse-move listener on mouse-up (drag is finished now)
  document.onmouseup = () => document.onmousemove = document.onmouseup = null;
}

body {
  margin: 0;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.block {
  height: 50%;
}

.block-1 {
  background-color: red;
  resize: vertical; /* resize vertical */
  overflow: auto; /* resize works for overflow other than visible */
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
  min-height: 0;
  overflow: hidden; /* hide overflow on small width */
}

.slider {
  text-align: center;
  letter-spacing: 10px;
  background-color: #dee2e6;
  cursor: row-resize;
  user-select: none; /* disable selection */
}

<div class="outer">
  <div class="block block-1">
    Block 1
  </div>
  <div class="slider">slider</div>
  <div class="block block-2">
    Block 2
  </div>
</div>