Как разрешить пользователю вручную изменять размер элемента <div>по вертикали?

Question

У меня есть 2 элемента div внутри другого div, и каждый из них отображается как блок. Таким образом, div1 заканчивается прямо над div2 .

Я хочу добавить "полосу" какого-то вида, которую пользователь может щелкнуть и перетащить, что приведет к изменению размера div2 , а div1 будет автоматически изменено на ту же величину .

Родитель div1 и div2 имеет стиль: display:flex;flex-direction:column; и div1 имеет flex-grow:1, поэтому он автоматически изменяет размеры.

Я хочу, чтобы панель изменения размера была примерно такой:

Как мне добавить что-то подобное? И есть ли способ изменить его внешний вид в CSS?

Answer 1

В вашем гибком боксе вы можете использовать resize на одном из делителей и настраивать другое автоматически с помощью flex-grow, установленным на один - недостаток в том, что ползунок не очень настраиваемый:

• добавьте resize: vertical к одному из гибких элементов
• добавьте flex: 1 к другому гибкому элементу (чтобы этот гибкий элемент настраивался автоматически в ответ на изменение высоты другого гибкого элемента по мере его изменения)

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

Вместо этого вы можете использовать mousedown слушатель, который регистрирует a 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>

Answer 2

const resize = document.getElementById('resize');
const handle = document.getElementById('handle');

let yStart;
let height;

handle.addEventListener('mousedown', function($event) {
  yStart = $event.pageY;
  height = resize.offsetHeight;
  handle.addEventListener('mousemove', mousemove);
});

handle.addEventListener('mouseup', function() {
  handle.removeEventListener('mousemove', mousemove);
});

function mousemove($event) {
  resize.style.height = height + ($event.pageY - yStart) + 'px';
}

#resize {
  position: relative;
  border: 1px solid black;
  height: 100px;
  box-sizing: border-box;
}

#handle {
  position: absolute;
  height: 2px;
  width: 100%;
  background: black;
  bottom: 0;
  cursor: row-resize;
}

<div id="resize">
  <div id="handle"></div>
</div>