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

问题描述

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

我想添加一个用户可以点击和拖动的条"，最终会调整 div2 的大小，div1 将自动调整大小等量.

div1 和 div2 的父元素有样式:display:flex;flex-direction:column; and div1em> 有 flex-grow:1 所以它会自动调整大小.

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

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

解决方案

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

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

body {边距:0；}.外{显示:弹性；弹性方向:列；高度:100vh；}.堵塞 {高度:50%；}.block-1 {背景颜色:红色；调整大小:垂直；/* 调整垂直大小 */溢出:自动；/* 调整大小适用于除可见之外的溢出 */}.block-2 {背景颜色:绿色；弹性:1；/* 自动调整 */}

<div class="block block-1">第 1 座
<div class="block block-2">第 2 座

<小时>

解决方案

相反，您可以使用 mousedown 侦听器 注册 一个 mousemove 侦听器更新 block-1 高度(和重置 mouseup 事件) - 请参阅下面的演示:

let block = document.querySelector(".block-1"),滑块 = document.querySelector(".slider");//鼠标按下(拖动开始)滑块.onmousedown = 函数dragMouseDown(e) {//获取鼠标位置让dragX = e.clientY;//如果鼠标按下，注册一个鼠标移动监听器document.onmousemove = 函数 onMouseMove(e) {//e.clientY 将是鼠标的位置，因为它现在移动了一点//offsetHeight 是 block-1 的高度block.style.height = block.offsetHeight + e.clientY - dragX + "px";//更新变量 - 直到这个位置，鼠标移动已被处理dragX = e.clientY;}//在鼠标抬起时移除鼠标移动侦听器(现在拖动完成)document.onmouseup = () =>document.onmousemove = document.onmouseup = null;}

body {边距:0；}.外{显示:弹性；弹性方向:列；高度:100vh；}.堵塞 {高度:50%；}.block-1 {背景颜色:红色；调整大小:垂直；/* 调整垂直大小 */溢出:自动；/* 调整大小适用于除可见之外的溢出 */}.block-2 {背景颜色:绿色；弹性:1；/* 自动调整 */最小高度:0；溢出:隐藏；/* 在小宽度上隐藏溢出 */}.slider {文本对齐:居中；字母间距:10px；背景颜色:#dee2e6；游标:调整行大小；用户选择:无；/* 禁用选择 */}

<div class="block block-1">第 1 座
<div class="slider">slider</div><div class="block block-2">第 2 座

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

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.

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:

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

解决方案

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:

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

---

Solution

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屋！