Resize three panels (left, center, right) in Javascript: the middle one does not resize

Issue

I'm new to Javascript. Having an html, css and js file, I have 3 panels that I would like to resize (left, center, right). The left panel resizes correctly (by dragging the column border).

Now I would also like to resize the central column by dragging the right side edge of the central column (the one circled in red). This will automatically resize both the center column and the right column.

I would like that when I resize the left panel, the left panel and the central panel should move, but the right panel must remain stationary. Consequently, when I resize the right panel, then the right panel and the central panel move, but the left panel must remain still.

I think I'm doing something wrong here:

   let prevX = e.x;
   const leftPanel = leftPane.getBoundingClientRect();

   let prevX2 = e.x;
   const centerPanel = centerPane.getBoundingClientRect();
  
   function mousemove(e) {
     let newX = prevX - e.x;
     leftPane.style.width = leftPanel.width - newX + "px";

     let newX2 = prevX2 - e.x;
     centerPane.style.width = centerPanel.width - newX2 + "px";
   }

Complete code:

index.html

<div class="wrapper">
  <div class="pane left">
    This is the left pane.
  </div>
  
    <div class="pane center">
    This is the center pane.
    <div class="gutter"></div>
  </div>
  
  
  <div class="pane right">
    This is the right pane.
    <div class="gutter"></div>
  </div>
</div>

style.css

*, *::before, *::after {
 box-sizing: border-box;
}
  
 body {
  margin: 0;
}

.wrapper {
  height: 100vh;
  width: 100vw;
  background: #333;
  border: 6px solid #666;
  display: flex;
}

.pane {
  padding: 1em;
  color: #fff;
  min-width: 200px;
}

.left {
  
}

.center {
  position: relative;
}

.right {
  position: relative;
}

.gutter {
  width: 10px;
  height: 100%;
  background: #666;
  position: absolute;
  top: 0;
  left: 0;
  cursor: col-resize;
}

panel.js

const leftPane = document.querySelector(".left");
const centerPane = document.querySelector(".center");
const centerPane = document.querySelector(".right");
const gutter = document.querySelector(".gutter");


function resizer(e) {
  
  window.addEventListener('mousemove', mousemove);
  window.addEventListener('mouseup', mouseup);
  
  let prevX = e.x;
  const leftPanel = leftPane.getBoundingClientRect();
  
  function mousemove(e) {
    let newX = prevX - e.x;
    leftPane.style.width = leftPanel.width - newX + "px";
  }
  
  function mouseup() {
    window.removeEventListener('mousemove', mousemove);
    window.removeEventListener('mouseup', mouseup);
    
  }
  
  
}
gutter.addEventListener('mousedown', resizer);

Can you help me please?

Solution

1. You need querySelectorAll and gutter.forEach... to add eventListener on both .gutter.

2. You can select previous panel according to the gutter you are moving.

const gutters = document.querySelectorAll(".gutter");
const panes = document.querySelectorAll(".pane");
const minWidth = 200;

function resizer(e) {
  window.addEventListener("mousemove", mousemove);
  window.addEventListener("mouseup", mouseup);

  let prevX = e.x;
  const currentPane = e.currentTarget.parentNode;
  const currentPanel = currentPane.getBoundingClientRect();
  const prevPane = currentPane.previousElementSibling;
  const prevPanel = prevPane.getBoundingClientRect();

  function mousemove(e) {
    let newX = prevX - e.x;
    let newCurrentWidth = currentPanel.width + newX;
    let newPrevWidth = prevPanel.width - newX;
    if (newCurrentWidth < minWidth || newPrevWidth < minWidth) return;
    currentPane.style.width = newCurrentWidth + "px";
    prevPane.style.width = newPrevWidth + "px";
  }

  function mouseup() {
    window.removeEventListener("mousemove", mousemove);
    window.removeEventListener("mouseup", mouseup);
  }
}
gutters.forEach((gutter) => gutter.addEventListener("mousedown", resizer));

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrapper {
  height: 100vh;
  width: 100vw;
  background: #333;
  border: 6px solid #666;
  display: flex;
}

.pane {
  padding: 1em;
  color: #fff;
  min-width: 200px;
}

.center {
  position: relative;
}

.right {
  position: relative;
  flex-grow: 1;
}

.gutter {
  width: 10px;
  height: 100%;
  background: #666;
  position: absolute;
  top: 0;
  left: 0;
  cursor: col-resize;
}

<div class="wrapper">
  <div class="pane left">
    This is the left pane.
  </div>

  <div class="pane center">
    This is the center pane.
    <div class="gutter"></div>
  </div>


  <div class="pane right">
    This is the right pane.
    <div class="gutter"></div>
  </div>
</div>

Answered By - Shuo