您如何允许用户手动调整< div>垂直的元素? [英] How do you allow a user to manually resize a <div> element vertically?

问题描述

我在另一个div中有2个div元素，它们分别显示为块.因此 div1 最终位于 div2 上方.

I have 2 div elements inside another div, and they are displayed as a block each. So div1 ends up right above div2.

我想添加某种类型的栏"，用户可以单击并拖动它，最终将调整 div2 的大小，而 div1 的大小将自动调整.相同数量.

I want to add a "bar" of some kind that the user can click and drag which will end up resizing div2, and div1 will be automatically resized by the same amount.

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

The parent of div1 and div2 has style: display:flex;flex-direction:column; and div1 has flex-grow:1 so it automatically resizes.

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

I want the resize bar to be something like this:

如何添加这样的内容?还有什么办法可以改变CSS的外观?

How do I add something like this? Also is there any way I can change the look of it in CSS?

推荐答案

在您的列flexbox 中，您可以使用

In your column flexbox you can use resize on one of the divs and adjust the other automatically using flex-grow set to one - the downside is that the slider is not very customizeable:

• 将resize: vertical添加到弹性项目之一
• 将flex: 1添加到另一个弹性项目(以便此弹性项目将随着调整大小的另一个弹性项目的高度变化而自动调整)

• add resize: vertical to one of the flex items
• add flex: 1 to the other flex item (so that this flex item will adjust automatically in response to the changing height of the other flex item as it is resized)

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高度(并 reset mouseup事件)-参见下面的演示:

Instead you can use a mousedown listener that registers a mousemove listener that updates the block-1 height (and reset the mouseup event) - see demo below:

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>

这篇关于您如何允许用户手动调整< div>垂直的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！