I am currently working on a web template that resembles a window, but I am facing an issue with the resizing functionality. The resizer located in the bottom right corner functions perfectly fine, however, when attempting to create a resizer for the top right corner, it does not work as expected. Despite trying various approaches, I have been unsuccessful in resolving this problem.
When dragging the resizer at the top right of the window, the resizing behavior is erratic and unusual. You can test it out yourself by visiting .
For the codebase, you can refer to the GitHub repository https://github.com/alhazacod/windowsxphtmltemplate
Below is the JavaScript code snippet:
dragru.onmousedown = function(event) {
let shiftLeft = event.clientX - wwindow.getBoundingClientRect().left;
let shiftTop = event.clientY - wwindow.getBoundingClientRect().top;
let shiftBottom = - event.clientY + wwindow.getBoundingClientRect().bottom;
function resize(w, h, pageY){
wwindow.style.top = pageY - shiftTop + 'px';
if(w>200){
wwindow.style.width = w + 'px';
}
if(h>200){
console.log(wwindow.getBoundingClientRect().bottom - event.pageY);
wwindow.style.height = (wwindow.getBoundingClientRect().bottom - event.pageY) + 'px';
}
//wwindow.style.top = pageY - shiftTop + 'px';
}
function onMouseMove(event){
shiftLeft = event.clientX - wwindow.getBoundingClientRect().left;
shiftBottom = -event.clientY + wwindow.getBoundingClientRect().bottom;
//if(event.pageY < windowh && event.pageY > 1 && event.pageX < windoww && event.pageX > 1){
resize(shiftLeft, shiftBottom, event.pageY);
//}
/*else{
document.removeEventListener('mousemove', onMouseMove);
wwindow.onmouseup = null;
}*/
}
document.addEventListener('mousemove', onMouseMove);
wwindow.onmouseup = function(){
document.removeEventListener('mousemove', onMouseMove);
wwindow.onmouseup = null;
};
};