调整窗口大小

窗口大小，我们可以非常方便的使用width、height调整，但是如何知道 width和height是一个问题？

在 Window 操作系统中，假如我们想要缩放，我们通常会把鼠标移动到窗口的右边栏，和底部边栏，以及右下边栏。

而且在不同的边栏，鼠标呈现的样式也是不一样的。当我们在右边栏的时候我们可以通过cursor: e-resize;模拟鼠标样式。

在底部边栏我们可以通过cursor: s-resize;来模拟样式，当我们是右下的时候可以用过cursor: nw-resize;模拟鼠标样式。

首先我们设想一种比较理想的情况，可以调整的盒子的左上角刚好就是页面的左上角，也就是坐标系的0点，横向的是x轴，竖着的是y轴。

当我们点击右边栏的时候，开始记录开始的点，同时也是开始设置盒子宽度的时候，之后我们可以在文档上面再监听一下鼠标的位置，通过事件的e.pageX属性可以拿到横坐标，其实这里的e.pageX就是我们的拖拽好了的width。

当然这是比较理想的情况下，通常我们的盒子并不一定是在左上角，此时我们需要把盒子左上角的点给计算出来。

6. 调整窗口大小效果 - 图1

这里有张图，我们先看 x 轴上面的情况。当用户点击我们的右边栏的时候，当然这里的点击指的是moursedown 鼠标按下，因为在拖拽的过程中，我们鼠标是不会放开的。 此时我们就可以拿到事件 e.pageX 和 右边栏距离盒子最左边的距离 offsetLeft 。

他们俩个相减就得到了盒子左上角点的x轴的坐标。也就是我们蓝线的值。

当我们把这个左边栏拖到新的位置的时候，我们把新的 pageX 减去 蓝线的值，就可以得到红线的值，而这个红线，就刚好等于我们需要设置的值。

  1. 首先准备 HTML
  1.     <div class="panel" id="resizeAble" >
  2.         <h1>Hello Window</h1>
  3.     </div>

2.准备 CSS 样式

  1.         .panel{
  2.             position: relative;
  3.             border: 1px solid #eee;
  4.             width: 400px;
  5.             height: 350px;
  6.             margin: 100px;
  7.             text-align: center;
  8.         }
  10.         .right-bar{
  11.             width: 10px;
  12.             height: 100%;
  13.             position: absolute;
  14.             right: 0;
  15.             top: 0;
  16.             cursor: e-resize;
  17.         }
  19.         .bottom-bar{
  20.             height: 10px;
  21.             width: 100%;
  22.             position: absolute;
  23.             bottom: 0;
  24.             cursor: s-resize;
  25.         }
  27.         .right-bottom-bar{
  28.             height: 20px;
  29.             width: 20px;
  30.             right: 0;
  31.             bottom: 0;
  32.             position: absolute;
  33.             cursor: nw-resize;
  34.         }

3.添加JS逻辑

首先添加控制栏

  1.         // 动态的添加控制栏
  2.         function addControlSideBar(panel){
  3.             const rightBar = document.createElement('div');
  4.             const bottomBar = document.createElement('div');
  5.             const rightBottomBar = document.createElement('div');
  7.             rightBar.className = 'right-bar';
  8.             bottomBar.className = 'bottom-bar';
  9.             rightBottomBar.className = 'right-bottom-bar';
  11.             let controlArray = [ rightBar, bottomBar, rightBottomBar] ;
  13.             controlArray.forEach((i) => {
  14.                 i.draggable = false; // 禁用拖拽
  15.                 panel.appendChild(i)
  16.             });
  18.             return controlArray;
  19.         }

之后为控制栏添加监听器

  1.         const panel = document.querySelector('#resizeAble');
  2.         // 为控制栏添加监听
  3.         function listenerControlSideBar(controlArray){
  4.             controlArray.forEach((v, k) => {
  5.                 v.addEventListener('mousedown', setPanelStatus , false)
  6.                 v.addEventListener('selectstart', () => (false), false); // 禁止被选中
  8.             })
  9.         }
  11.        let controlArray = addControlSideBar(panel);
  12.        listenerControlSideBar(controlArray);

完成我们的 setPanelStatus 当用户点击我们的控制栏触发的回调函数。

  2.         var move_to_x, move_to_y; // 移动后的新坐标
  4.         var timer; // 不停设置面板宽度和高度的定时器
  6.         let min_width = 300;
  7.         let min_height = 250; // 最小的宽度和高度
  9.         // 实时监听鼠标的状态
  10.         document.onmousemove = (e) => {
  11.             move_to_x = e.pageX;
  12.             move_to_y = e.pageY;
  13.         }
  15.          // 设置面板的状态
  16.         function setPanelStatus(e){
  17.             console.log(e);
  18.             // 当鼠标按下那一刻执行这个函数
  19.                 let start_x = e.pageX - e.target.offsetLeft;
  20.                 let start_y = e.pageY - e.target.offsetTop;
  21.                 // (start_x, start,y) 盒子左上角的坐标值.
  23.                 // 此时只要我们不放鼠标，那么高度就会跟随 move_to_x， 和 move_to_y 一直设置。 这个一直设置，我们需要用一个定时器来实现。
  25.                 timer = setInterval(() => {
  26.                     const width = Math.max(min_width, move_to_x - start_x);
  27.                     const height = Math.max(min_height, move_to_y - start_y);
  29.                     // 判断我们按下的是哪个控制栏，根据类别来设置宽和高
  30.                     // 这里的 10 和 20 分别是 变量的宽度
  31.                     switch(e.target.className){
  32.                         case 'right-bar':
  33.                             panel.style.width = width + 'px';
  34.                             break;
  35.                         case 'bottom-bar':;
  36.                             panel.style.height = height + 'px';
  37.                             break;
  38.                         case 'right-bottom-bar':
  39.                             panel.style.height = height + 'px';
  40.                             panel.style.width = width + 'px';
  41.                             break;
  42.                     }
  43.                 }, 10)
  44.         }

之后我们完成我们的当用户放开鼠标，取消继续设置宽度和高度的定时器

  1.         document.onmouseup = document.ondrag = (e) => { // ondrag 是拖拽时间，有的时候把边栏当做拖拽的时候，没有及时清除 timer 就会出现 bug
  2.             clearInterval(timer);
  3.             timer = null;
  4.         }

有的时候，可能title 会被选中

  1.     panel.onselectstart = () => (false); // 禁止面板中被选中

OK，这样我们就完成了我们的逻辑。