I'm trying to make dynamic, resizable divs in html using JS. I want to have panels that are resizable like they are at JSFiddle.net. I don't want to go into jQuery resizable widgets.
I have a container with 3 divs. Their id's are: left, right and resize-v (vertical resize puller). This vertical puller has listener on "mousedown" event, which on activation puts listener on "mousemove" on document, which further provides mouse_event.movementX to calculate the resize of left and right divs in simple fashion (just add or substruct mouse X-coord delta):
let left = document.getElementById("left");
let right = document.getElementById("right");
left.style.width = left.clientWidth + event.movementX + "px";
right.style.width = right.clientWidth - event.movementX + "px";
But for some unknown reason it doesn't work well: resize movement is not synchronous with mouse movements - mouse cursor tend to go more and more to the left of resize bar. I found I can use event.pageX instead and get more consistent behavior with such code:
let container = document.getElementById("container");
left.style.width = event.pageX - 10 + "px";
right.style.width = container.clientWidth - event.pageX + 6 + "px";
JSFiddle code with event.pageX
It work's almost fine (thought there artifacts when window is resized and cursor change is not working or breaks - I'm loosing col-resize cursor and see usual arrow where col-resize should be) but I would love to know why movementX behaves so strange and what am I missing about it's nature. And what are the solutions to make consistent resizable panels like JSFiddle?
