<div class="container-divs">
<div class="row-divs">
<div
id="cd-1"
class="col-div col-div-flex border-div"
style="background-color: #d5ff00f7"
></div>
<div class="spliter-div"></div>
<div
id="cd-2"
class="col-div col-div-flex border-div"
style="background-color: #6719b5e2"
></div>
</div>
</div>
:root {
--m-x: 0;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
body {
margin-bottom: 60px;
}
.container-divs {
display: flex;
flex: 1 1 auto;
height: 100%;
width: 100%;
}
.row-divs {
display: flex;
width: 100%;
}
.col-div {
margin: 3px;
padding: 3px;
min-width: 20%;
max-width: 80%;
}
.col-div-flex {
flex: 1 0 0%;
}
.border-div {
border: 1px #a3a3a3 ridge;
border-radius: 9px;
}
.spliter-div {
width: 5px;
height: 96%;
margin: 3px 0;
background: #9a969676;
position: absolute;
left: var(--m-x);
margin-top: 9px;
cursor: col-resize;
}
let root = document.documentElement;
let spliter = document.querySelector(".spliter-div");
let rowDiv = document.querySelector(".row-divs");
let cd1 = document.getElementById("cd-1");
var isDown = false;
var isHover = false;
var minWidth = 127;
var maxWidth = 600;
function setPosition() {
var cl = this.document.querySelector(".col-div");
if (cl) {
root.style.setProperty("--m-x", cl.offsetWidth + 3.5 + "px");
}
minWidth = parseInt(rowDiv.clientWidth / 10) * 2 + 22;
maxWidth = parseInt(rowDiv.clientWidth - minWidth);
}
function moveTo(e) {
if (e.clientX > minWidth && e.clientX < maxWidth) {
if (cd1.classList.contains("col-div-flex")) {
cd1.classList.remove("col-div-flex");
}
cd1.style.width = e.clientX + "px";
root.style.setProperty("--m-x", e.clientX + 9.5 + "px");
}
}
setPosition();
window.addEventListener("DOMContentLoaded", function (e) {
setPosition();
});
window.addEventListener("resize", function (e) {
setPosition();
});
root.addEventListener(
"mousedown",
function (e) {
if (isHover) {
isDown = true;
}
},
true
);
document.addEventListener(
"mouseup",
function (e) {
isDown = false;
if (isHover) {
//...
}
},
true
);
document.addEventListener("mousemove", function (e) {
if (isDown) {
moveTo(e);
}
});
spliter.addEventListener("mouseenter", function (e) {
isHover = true;
spliter.style.cursor = "col-resize";
});
spliter.addEventListener("mouseout", function (e) {
isHover = false;
});
HTML
CSS
JS