As I work on creating a basic horizontal split pane using HTML, CSS, and JavaScript, I have drawn inspiration from this post.
While the vertical split pane functions smoothly, the horizontal version seems to be glitchy. The sizes and positions of the div elements seem to jump to unexpected values, and I'm struggling to identify the root cause.
The problem is somewhat subtle in the snippet below, but there is noticeable jitteriness and delays.
Snippet included below:
function dragElement(element, direction) {
var md;
const first = document.getElementById("map");
const second = document.getElementById("table");
element.onmousedown = onMouseDown;
function onMouseDown(e) {
md = {
e,
offsetLeft: element.offsetLeft,
offsetTop: element.offsetTop,
offsetBottom: element.offsetBottom,
firstWidth: first.offsetWidth,
secondWidth: second.offsetWidth,
firstHeight: first.offsetHeight,
secondHeight: first.offsetHeight
};
document.onmousemove = onMouseMove;
document.onmouseup = () => {
document.onmousemove = document.onmouseup = null;
}
}
function onMouseMove(e) {
var delta = {
x: e.clientX - md.e.x,
y: e.clientY - md.e.y
};
if (direction === "H") {
delta.x = Math.min(Math.max(delta.x, - md.firstWidth),
md.secondWidth);
element.style.left = md.offsetLeft + delta.x + "px";
first.style.width = (md.firstWidth + delta.x) + "px";
second.style.width = (md.secondWidth - delta.x) + "px";
}
if (direction === "V") {
delta.y = Math.min(Math.max(delta.y, - md.firstHeight), md.secondHeight);
element.style.top = md.offsetTop + delta.y + "px";
first.style.height = (md.firstHeight + delta.y) + "px";
second.style.height = (md.secondHeight - delta.y) + "px";
}
}
}
dragElement(document.getElementById("separator"), "V");html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.splitter {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/*for horizontal*/
#separator {
cursor: row-resize;
background-color: #aaa;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 10px;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#map {
width: 100%;
height: 20%;
min-height: 10px;
padding: 0;
margin: 0;
}
#table {
width: 100%;
height: 20%;
min-height: 10px;
}<div class="splitter">
<div id="map"></div>
<div id="separator"></div>
<div id="table"></div>
</div>