您如何允许用户手动调整 <div>垂直元素?

问题描述

我在另一个 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?

推荐答案

在你的 column flexbox 你可以使用 resize 在其中一个 div 上，并使用 flex-grow 自动调整另一个 设置为 1 - 缺点 是 滑块 不是很可定制:

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 添加到另一个 flex 项(以便 this flex 项将在调整大小时自动调整以响应另一个 flex 项的高度变化)

• 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>

相反，您可以使用 注册 mousemove 监听器的 mousedown 监听器来更新 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>垂直元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！