Fiddle. I am in the process of developing a chat/mail application with a resizable menu similar to the Google Hangouts desktop app. When resizing the brown content pane at a normal speed, you can observe that the boundaries are functioning as intended. My approach involves using style.left and a function that monitors cursor direction to ensure the cursor stays aligned with the drag bar.
Issue: If you hold down the mouse on the drag bar and quickly resize it out of bounds multiple times with a "fling" motion, you'll notice the behavior deviates from what was expected.
edit: The bug is less prominent when using Edge and Firefox browsers. It does not occur on the right side, but occasionally occurs on the left, never going off-screen completely.
Below is the view controller code extracted from the provided fiddle.
//handles all mousemove and boundary cases.
mouseMove(e) {
//size of right pane relative to container (percent)
let percentRight = Math.round(this.messageWindowContentContainer.clientWidth/this.chatContainer.clientWidth * 100);
//normal mousemove within the bounds min:25 and max:94
if ((percentRight) <= 94 && percentRight >= 25) {
document.getElementById("content2").innerHTML = "Content";
this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");
}
//Only moves if right pane is out of bounds(left), mouse if moving right, and mouse is right of pane
if (percentRight > 94 && this.getCursorXPercentage(e) >= 6 && this.cursorMovingRight(e)) {
this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");
}
//Only moves if right pane is out of bounds (right), mouse is moving left, and mouse is left of pane
if (percentRight < 25 && this.getCursorXPercentage(e) <= 75 && this.cursorMovingLeft(e)) {
this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");
}
}
//if e.movementX is positive, moving right
cursorMovingRight(e) {
return (Math.sign(e.movementX) === 1)
}
//if e.movementX is negative, moving left
cursorMovingLeft(e) {
return (Math.sign(e.movementX) === -1)
}
//returns cursor location relative to container as percent
getCursorXPercentage(e) {
let percentage = Math.round((e.clientX / this.chatContainer.getBoundingClientRect().width) * 100)
console.log(percentage)
document.getElementById("content2").innerHTML = percentage;
return percentage;
}