I am a newcomer to JavaScript and currently working with HTML, CSS, and JS files. I have three panels - left, center, and right - that I want to resize. The left panel resizes correctly when dragging the column border.
https://i.stack.imgur.com/LxhUX.png
Now, I also want to be able to resize the central column by dragging the right side edge of the central column (as shown in red circle). This action should automatically adjust both the center and right columns.
My goal is to have the left panel and central panel move together when resizing the left panel, while keeping the right panel stationary. Similarly, when resizing the right panel, only the right panel and the central panel should adjust.
I suspect there might be an issue in my code:
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";
}
Here is the 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);
Any assistance would be greatly appreciated!