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

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

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

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

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

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

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

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

1. 首先准备 HTML

2.准备 CSS 样式

        .panel{
            position: relative;
            border: 1px solid #eee;
            width: 400px;
            height: 350px;
            margin: 100px;
            text-align: center;
        }
        .right-bar{
            width: 10px;
            position: absolute;
            right: 0;
            top: 0;
        }
        .bottom-bar{
            height: 10px;
            width: 100%;
            position: absolute;
            bottom: 0;
            cursor: s-resize;
        }
        .right-bottom-bar{
            height: 20px;
            width: 20px;
            right: 0;
            position: absolute;
        }

首先添加控制栏

之后为控制栏添加监听器

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

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

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

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

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