I am currently dealing with a container that has the ability to resize from the right side and the bottom.
The resizing is functioning correctly, but it is adjusting both height and width simultaneously in unlimited length. Is there a way to limit the direction of resizing to either increase or decrease only on the bottom or right side?
It seems that single side increase is only possible when using one condition in an if statement.
Below is the provided code snippet:
const panel = document.getElementById("styleChangeOuterTag");
let m_pos;
let m_pos1;
function resize(e) {
const dx = m_pos - e.x;
const dy = m_pos1 - e.y;
m_pos = e.x;
m_pos1 = e.y;
panel.style.width = (parseInt(getComputedStyle(panel).width) - dx) + "px";
panel.style.height = (parseInt(getComputedStyle(panel).height) - dy) + "px";
}
panel.addEventListener("mousedown", function(e) {
if (e.offsetX > panel.clientWidth - 10) {
m_pos = e.x;
document.addEventListener("mousemove", resize);
} else if (e.offsetY > panel.clientHeight - 10) {
m_pos1 = e.y;
document.addEventListener("mousemove", resize);
}
});
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", resize);
});I'm struggling with setting the correct size for the clickable width (grey part in Container-which triggers resize) as it's not quite right and doesn't cover the entire width. It was implemented using e.offsetX > panel.clientWidth - 10. Any advice on this issue would be greatly appreciated.
Thank you in advance for your help!