Javascript 创建一个html模板，该模板看起来像windown，但大小调整器有问题

我正在创建一个windown，看起来像web模板，但我的大小调整器有问题，右下角的大小调整器工作正常，但试图创建右上角的大小调整器不起作用，我不知道为什么我尝试了所有方法，但都不起作用

拖动右上角的大小调整器时，窗口无法很好地调整大小。它的动作真的很奇怪。你自己试试看

这是Github

JavaScript代码：

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;
  };
};

dragru.onmousedown=函数（事件）{
让shiftLeft=event.clientX-wwindow.getBoundingClientRect（）.left；
让shiftTop=event.clientY-wwindow.getBoundingClientRect（）.top；
让shiftBottom=-event.clientY+wwindow.getBoundingClientRect（）.bottom；
函数调整大小（w、h、pageY）{
wwindow.style.top=pageY-shiftTop+'px'；
如果（w>200）{
wwindow.style.width=w+'px'；
}
如果（h>200）{
log（wwindow.getBoundingClientRect（）.bottom-event.pageY）；
wwindow.style.height=（wwindow.getBoundingClientRect（）.bottom-event.pageY）+“px”；
}
//wwindow.style.top=pageY-shiftTop+'px'；
}
mouseMove函数（事件）{
shiftLeft=event.clientX-wwindow.getBoundingClientRect（）.left；
shiftBottom=-event.clientY+wwindow.getBoundingClientRect（）.bottom；
//如果（event.pageY1&&event.pageX1）{
调整大小（shiftLeft、shiftBottom、event.pageY）；
//}
/*否则{
document.removeEventListener（'mousemove'，onMouseMove）；
wwindow.onmouseup=null；
}*/
}
document.addEventListener（'mousemove'，onMouseMove）；
wwindow.onmouseup=函数（）{
document.removeEventListener（'mousemove'，onMouseMove）；
wwindow.onmouseup=null；
};
};

将dragru更改为以下代码，它就可以工作了

dragru.onmousedown = function (event) {
    let bottom = wwindow.getBoundingClientRect().bottom;
    let left = wwindow.getBoundingClientRect().left;

    function resize(w, h) {
        if (w > 200) {
            wwindow.style.width = w + 'px';
        }
        if (h > 200) {
            wwindow.style.top = bottom - h + 'px';
            wwindow.style.height = h + 'px';
        }
    }

    function onMouseMove(event) {
        if (event.pageY < windowh && event.pageY > 1 && event.pageX < windoww && event.pageX > 1)
            resize(event.clientX - left, bottom - event.clientY);
        else {
            document.removeEventListener('mousemove', onMouseMove);
            wwindow.onmouseup = null;
        }
    }

    document.addEventListener('mousemove', onMouseMove);

    wwindow.onmouseup = function () {
        document.removeEventListener('mousemove', onMouseMove);
        wwindow.onmouseup = null;
    };
};

使用者
霍拉·蒙多
你好

“windown look like”是指“Windows look like”？我希望

dragrd

和

dragru

的代码非常相似-你不需要增加或减少

高度

，同时也分别减少或增加

top

或

transformX

。对于错误，我不是母语为@kshetline的人。如果代码非常相似，你可以查看它github，但我想我回复得太晚了，谢谢你的帮助@Bravo