javascript 制作一个拖动条来调整 CSS 网格内 div 的大小

Making a dragbar to resize divs inside CSS grids

提问by Aquazi

I have 2 boxes and a vertical div line in one unique container div (code and fiddle below).

我在一个独特的容器 div 中有 2 个盒子和一条垂直 div 线（下面的代码和小提琴）。

I'm using CSS grids to position my elements inside the container

我正在使用 CSS 网格将我的元素定位在容器内

What I'd like to accomplish is to use the vertical line to resize horizontally the two boxes based on the position of the vertical line.

我想要完成的是使用垂直线根据垂直线的位置水平调整两个框的大小。

I apologize if the question is noobish, I am new to web development, only used Python before, already tried to google and stackoverflow search but all solutions seem overly complicated and generally require additional libraries, I was looking for something simpler and JS only.

如果问题是菜鸟，我很抱歉，我是 Web 开发的新手，之前只使用过 Python，已经尝试过 google 和 stackoverflow 搜索，但所有解决方案似乎都过于复杂，通常需要额外的库，我一直在寻找更简单的 JS。

HTML:

HTML：

<div class="wrapper">
  <div class="box a">A</div>
  <div class="handler"></div>
  <div class="box b">B</div>
</div>

CSS:

CSS：

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 8px 200px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  resize: both;
}

.handler{
    width: 3px;
    height: 100%;
    padding: 0px 0;
    top: 0;
    background: red;
    draggable: true;
}

https://jsfiddle.net/gv8Lwckh/6/

https://jsfiddle.net/gv8Lwckh/6/

回答by Terry

What you intend to do can be done using CSS flexbox—there is no need to use CSS grid. The bad news is that HTML + CSS is not so smart that declaring resizeand draggablewill make the layout flexible and adjustable by user interaction. For that, you will have to use JS. The good news is that this is actually not too complicated.

你打算做的事情可以使用 CSS flexbox 来完成——不需要使用 CSS 网格。坏消息是 HTML + CSS 没有那么聪明，声明resize它draggable将使布局灵活且可通过用户交互进行调整。为此，您将不得不使用 JS。好消息是，这实际上并不太复杂。

Here is a quick screen grab of output the code below:

这是输出以下代码的快速屏幕截图：

However, for you to understand the code I will post below, you will have to familiarize yourself with:

但是，为了理解我将在下面发布的代码，您必须熟悉：

• Event binding using .addEventListener. In this case, we will use a combination of mousedown, mouseupand mousemoveto determine whether the user is in the middle of dragging the element
• CSS flexbox layout

• 事件绑定使用.addEventListener. 在这种情况下，我们将使用mousedown,mouseup和的组合mousemove来确定用户是否在拖动元素的中间
• CSS 弹性盒布局

---

---

Description of the solution

解决方案说明

Initial layout using CSS

使用 CSS 的初始布局

Firstly, you will want to layout your boxes using CSS flexbox. We simply declare display: flexon the parent, and then use flex: 1 1 auto(which translates to "let the element grow, let the element shrink, and have equal widths). This layout is only valid at the initial rendering of the page:

首先，您需要使用 CSS flexbox 来布局您的盒子。我们简单地display: flex在父级上声明，然后使用flex: 1 1 auto（意思是“让元素增长，让元素缩小，并具有相等的宽度）。这种布局仅在页面初始渲染时有效：

.wrapper {
  /* Use flexbox */
  display: flex;
}

.box {
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;

  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 auto;
}

Listen to drag interaction

听拖拽互动

You want to listen to mouse events that might have originated from your .handlerelement, and you want a global flag that remembers whether the user is dragging or not:

您想监听可能源自您的.handler元素的鼠标事件，并且需要一个全局标志来记住用户是否正在拖动：

var handler = document.querySelector('.handler');
var isHandlerDragging = false;

Then you can use the following logic to check if the user is dragging or not:

然后您可以使用以下逻辑来检查用户是否正在拖动：

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target === handler) {
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false
  if (!isHandlerDragging) {
    return false;
  }

  // Set boxA width properly
  // [...more logic here...]
});

document.addEventListener('mouseup', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});

Computing the width of box A

计算框 A 的宽度

All you are left with now is to compute the width of box A (to be inserted in the [...more logic here...]placeholder in the code above), so that it matches that of the movement of the mouse. Flexbox will ensure that box B will fill up the remaining space:

现在剩下的就是计算框 A 的宽度（要插入到[...more logic here...]上面代码中的占位符中），使其与鼠标移动的宽度相匹配。Flexbox 将确保 box B 将填充剩余空间：

// Get offset
var containerOffsetLeft = wrapper.offsetLeft;

// Get x-coordinate of pointer relative to container
var pointerRelativeXpos = e.clientX - containerOffsetLeft;

// Resize box A
// * 8px is the left/right spacing between .handler and its inner pseudo-element
// * Set flex-grow to 0 to prevent it from growing
boxA.style.width = (pointerRelativeXpos - 8) + 'px';
boxA.style.flexGrow = 0;

---

---

Working example

工作示例

var handler = document.querySelector('.handler');
var wrapper = handler.closest('.wrapper');
var boxA = wrapper.querySelector('.box');
var isHandlerDragging = false;

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target === handler) {
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false
  if (!isHandlerDragging) {
    return false;
  }

  // Get offset
  var containerOffsetLeft = wrapper.offsetLeft;

  // Get x-coordinate of pointer relative to container
  var pointerRelativeXpos = e.clientX - containerOffsetLeft;
  
  // Arbitrary minimum width set on box A, otherwise its inner content will collapse to width of 0
  var boxAminWidth = 60;

  // Resize box A
  // * 8px is the left/right spacing between .handler and its inner pseudo-element
  // * Set flex-grow to 0 to prevent it from growing
  boxA.style.width = (Math.max(boxAminWidth, pointerRelativeXpos - 8)) + 'px';
  boxA.style.flexGrow = 0;
});

document.addEventListener('mouseup', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});

body {
  margin: 40px;
}

.wrapper {
  background-color: #fff;
  color: #444;
  /* Use flexbox */
  display: flex;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;
  
  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 auto;
}

.handler {
  width: 20px;
  padding: 0;
  cursor: ew-resize;
  flex: 0 0 auto;
}

.handler::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="handler"></div>
  <div class="box">B</div>
</div>

回答by lukerazor

Here's an example of the drag event handling, but using CSS Grids

这是拖动事件处理的示例，但使用 CSS 网格

The trick is to set the grid-template-columns (or rows) on the grid container rather than than the size of the grid items

诀窍是在网格容器上设置网格模板列（或行）而不是网格项的大小

let isLeftDragging = false;
let isRightDragging = false;

function ResetColumnSizes() {
  // when page resizes return to default col sizes
  let page = document.getElementById("pageFrame");
  page.style.gridTemplateColumns = "2fr 6px 6fr 6px 2fr";
}

function SetCursor(cursor) {
  let page = document.getElementById("page");
  page.style.cursor = cursor;
}

function StartLeftDrag() {
  // console.log("mouse down");
  isLeftDragging = true;

  SetCursor("ew-resize");
}

function StartRightDrag() {
  // console.log("mouse down");
  isRightDragging = true;

  SetCursor("ew-resize");
}

function EndDrag() {
  // console.log("mouse up");
  isLeftDragging = false;
  isRightDragging = false;

  SetCursor("auto");
}

function OnDrag(event) {
  if (isLeftDragging || isRightDragging) {
    // console.log("Dragging");
    //console.log(event);

    let page = document.getElementById("page");
    let leftcol = document.getElementById("leftcol");
    let rightcol = document.getElementById("rightcol");

    let leftColWidth = isLeftDragging ? event.clientX : leftcol.clientWidth;
    let rightColWidth = isRightDragging ? page.clientWidth - event.clientX : rightcol.clientWidth;

    let dragbarWidth = 6;

    let cols = [
      leftColWidth,
      dragbarWidth,
      page.clientWidth - (2 * dragbarWidth) - leftColWidth - rightColWidth,
      dragbarWidth,
      rightColWidth
    ];

    let newColDefn = cols.map(c => c.toString() + "px").join(" ");

    // console.log(newColDefn);
    page.style.gridTemplateColumns = newColDefn;

    event.preventDefault()
  }
}

#page {
  height: 100%;
  background-color: pink;
  display: grid;
  grid-template-areas: 'header header header header header' 'leftcol leftdragbar tabs tabs tabs' 'leftcol leftdragbar tabpages rightdragbar rightcol' 'leftcol leftdragbar footer footer footer';
  grid-template-rows: min-content 1fr 9fr 1fr;
  grid-template-columns: 2fr 6px 6fr 6px 2fr;
}


/*****************************/

#header {
  background-color: lightblue;
  overflow: auto;
  grid-area: header;
}

#leftcol {
  background-color: #aaaaaa;
  overflow: auto;
  grid-area: leftcol;
}

#leftdragbar {
  background-color: black;
  grid-area: leftdragbar;
  cursor: ew-resize;
}

#tabs {
  background-color: #cccccc;
  overflow: auto;
  grid-area: tabs;
}

#tabpages {
  background-color: #888888;
  overflow: auto;
  grid-area: tabpages;
}

#rightdragbar {
  background-color: black;
  grid-area: rightdragbar;
  cursor: ew-resize;
}

#rightcol {
  background-color: #aaaaaa;
  overflow: auto;
  grid-area: rightcol;
}

#footer {
  background-color: lightblue;
  overflow: auto;
  grid-area: footer;
}

<body onresize="ResetColumnSizes()">
  <div id="page" onmouseup="EndDrag()" onmousemove="OnDrag(event)">
    <div id="header">
      Header
    </div>
    <div id="leftcol">
      Left Col
    </div>
    <div id="leftdragbar" onmousedown="StartLeftDrag()"></div>
    <div id="tabs">
      Tabs
    </div>
    <div id="tabpages">
      Tab Pages
    </div>
    <div id="rightdragbar" onmousedown="StartRightDrag()"></div>
    <div id="rightcol">
      Rightcol
    </div>
    <div id="footer">
      Footer
    </div>
  </div>
</body>

https://codepen.io/lukerazor/pen/GVBMZK

https://codepen.io/lukerazor/pen/GVBMZK