I have a container which can resize from right-side and bottom .
It is resizing correctly but in both sides that is in height and width at the same time in unlimited length .
Can there be a way to limit direction of resize either bottom side or right side increase or decrease in size .
Single side increase is only possible when using 1 condition in if
Here is the code :
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);
});#styleChangeOuterTag {
/* display: none; */
/* position: fixed; */
position: relative;
top: 0;
left: 0;
width: 300px;
height: 300px;
padding: 2vw 1.5vw;
background-color: rgb(255, 245, 245);
border: 2px solid rgb(255, 60, 255);
border-radius: 3px;
z-index: 5;
user-select: none;
}
#styleChangeOuterTag::after {
content: '';
background-color: #ccc;
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
cursor: ew-resize;
}
#styleChangeOuterTag::before {
content: '';
background-color: #ccc;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 10px;
cursor: ns-resize;
}
#styleOptionDetails {
border: 2px solid purple;
border-radius: 3px;
padding: 1vw;
overflow: auto;
}<div id="styleChangeOuterTag">
<hr>
<div id="styleOptionDetails">
</div>
</div>Can you tell about how to size the clickable width(grey part in Container-which trigger resize) as now it not right in size and don't work in whole width
created with e.offsetX > panel.clientWidth - 10
Thanks for help in advance
You may add additional condition in to your resize function, something like this:
const minWidth = 150
const maxWidth = 500
const minHeight = 150
const maxHeight = 500
function resize(e) {
const dx = m_pos - e.x;
const dy = m_pos1 - e.y;
m_pos = e.x;
m_pos1 = e.y;
const newWidth = parseInt(getComputedStyle(panel).width) - dx
const newHeight = parseInt(getComputedStyle(panel).height - dy
if (newWidth > minWidth && newWidth < maxWidth) {
panel.style.width = newWidth + "px";
}
if (newHeight > minHeight && newHeight < maxHeight) {
panel.style.height = newHeight + "px";
}
}