How can I split the resizable panel vertically using JavaScript

Question

How can I split the resizable panel vertically using current code HTML,CSS and JavaScript. Right now this code is working for horizontal resizable split. What are the changes I would have to do in this current code.

 // A function is used for dragging and moving function dragElement(element, direction) { var md; // remember mouse down info const first = document.getElementById("first"); const second = document.getElementById("second"); element.onmousedown = onMouseDown; function onMouseDown(e) { //console.log("mouse down: " + e.clientX); md = { e, offsetLeft: element.offsetLeft, offsetTop: element.offsetTop, firstWidth: first.offsetWidth, secondWidth: second.offsetWidth }; document.onmousemove = onMouseMove; document.onmouseup = () => { //console.log("mouse up"); document.onmousemove = document.onmouseup = null; } } function onMouseMove(e) { //console.log("mouse move: " + e.clientX); var delta = { x: e.clientX - md.e.clientX, y: e.clientY - md.e.clientY }; if (direction === "H") // Horizontal { // Prevent negative-sized elements 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"; } } } dragElement(document.getElementById("separator"), "H");

 .splitter { width: 100%; height: 100px; display: flex; } #separator { cursor: col-resize; background-color: #aaa; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>"); background-repeat: no-repeat; background-position: center; width: 10px; height: 100%; /* Prevent the browser's built-in drag from interfering */ -moz-user-select: none; -ms-user-select: none; user-select: none; } #first { background-color: #dde; width: 20%; height: 100%; min-width: 10px; } #second { background-color: #eee; width: 80%; height: 100%; min-width: 10px; }

 <body> <div class="splitter"> <div id="first"></div> <div id="separator"></div> <div id="second"></div> </div> </body>

Answer 1

I would do it like this. You will need another SVG image to design properly the separator because the previous one was created for horizontal purpose.

 // A function is used for dragging and moving function dragElement(element, direction) { var md; // remember mouse down info const first = document.getElementById("first"); const second = document.getElementById("second"); element.onmousedown = onMouseDown; function onMouseDown(e) { //console.log("mouse down: " + e.clientX); md = { e, offsetLeft: element.offsetLeft, offsetTop: element.offsetTop, firstHeight: first.offsetHeight, secondHeight: second.offsetHeight }; document.onmousemove = onMouseMove; document.onmouseup = () => { //console.log("mouse up"); document.onmousemove = document.onmouseup = null; } } function onMouseMove(e) { //console.log("mouse move: " + e.clientX); var delta = { x: e.clientX - md.e.clientX, y: e.clientY - md.e.clientY }; if (direction === "V") // Vertical { // Prevent negative-sized elements delta.x = Math.min(Math.max(delta.y, -md.firstHeight), md.secondHeight); element.style.top = md.offsetTop + delta.x + "px"; first.style.height = (md.firstHeight + delta.x) + "px"; second.style.height = (md.secondHeight - delta.x) + "px"; } } } dragElement(document.getElementById("separator"), "V");

 .splitter { width: 100%; height: 100px; } #separator { cursor: col-resize; background-color: #aaa; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='3'><path d='M2 30 0 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>"); background-repeat: no-repeat; background-position: center; width: 100%; height: 5px; /* Prevent the browser's built-in drag from interfering */ -moz-user-select: none; -ms-user-select: none; user-select: none; } #first { background-color: #dde; width: 100%; height: 100%; min-width: 10px; } #second { background-color: #eee; width: 100%; height: 100%; min-width: 10px; }

 <body> <div class="splitter"> <div id="first"></div> <div id="separator"></div> <div id="second"></div> </div> </body>

How can I split the resizable panel vertically using JavaScript

Question

1 answers

solution1
0 2021-11-25 08:57:58

How can I split the resizable panel vertically using JavaScript

Question

1 answers

solution1 0 2021-11-25 08:57:58

solution1
0 2021-11-25 08:57:58