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'); } } 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; });<!DOCTYPE html> <html> <head> <style> /* CSS to style the resizable div */ .resizable { width: 200px; height: 200px; resize: both; overflow: auto; border: 1px solid #ccc; padding: 10px; } </style> </head> <body> <div class="resizable" id="myDiv"> Resize this div </div> <script> // JavaScript to implement resizing functionality const resizableDiv = document.getElementById('myDiv'); resizableDiv.addEventListener('mousedown', initResize, false); function initResize(e) { window.addEventListener('mousemove', resizeDiv, false); window.addEventListener('mouseup', stopResize, false); let prevX = e.clientX; let prevY = e.clientY; function resizeDiv(e) { const width = resizableDiv.offsetWidth + (e.clientX - prevX); const height = resizableDiv.offsetHeight + (e.clientY - prevY); resizableDiv.style.width = width + 'px'; resizableDiv.style.height = height + 'px'; prevX = e.clientX; prevY = e.clientY; } function stopResize() { window.removeEventListener('mousemove', resizeDiv, false); } } </script> </body> </html>