浏览器页面中实现动态调整盒子大小

在需要实现的盒子右下角添加一个图标，并且给图标添加点击事件，详情见代码。还可以将鼠标样式也调整成这样： ​​​ 代码如下：

function resizeEventBox(e) {
    let oldX = e.pageX;
    let oldY = e.pageY;
    //鼠标点击的位置减去offset偏移量，就等于盒子目前的width，height（因为调整大小图标放右下角）
    let width = e.pageX - eventBox.value.offsetLeft;
    let height = e.pageY - eventBox.value.offsetTop;
    document.addEventListener('mousemove', move);
    function move(e) {
        let newX = e.pageX;
        let newY = e.pageY;
        eventBox.style.width = width + (newX - oldX ) + 'px';
        eventBox.style.height = height + (newY - oldY) + 'px';
    }
    // （3）鼠标弹起，就让鼠标移动事件移除
    document.addEventListener('mouseup', () => {
        document.removeEventListener('mousemove', move);
    });
}

然后就可以对盒子进行大小调节，最好还是给盒子设置一个minwidth，minheight。

当然，前提是盒子的样式必须是绝对定位，不然无效。