问题
I'm creating an windown look like template for web but I have a problem with the resizer, the resizer in the bottom right works perfectly but trying to create the top right resizer don't work and I don't know why I have tried everything but it doesn't work.
Here's the github https://github.com/alhazacod/windowsxphtmltemplate
The JavaScript code:
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;
};
};
来源:https://stackoverflow.com/questions/58313373/im-creating-an-html-template-that-looks-like-windown-but-have-problems-with-the