拖拽边框调整组件大小

前言

最新需要实现一个拖拽改变组件高度的功能，之前一直觉得很简单，今天在做的时候才发现还是有些东西需要注意的，特在此记录。

原理

其实原理并不复杂，大致代码如下：

let startX = startY = 0, draging = false;
const handleMouseDown = event => {
    draging = true;
    startX = event.screenX;
    startY = event.screenY;
}
const handleMouseMove = event => {
    if(draging) {
        // 这里是拖拽下边框和右边框
        // 如果是左边框和上边框，则相反
        element.width += (event.startX - startX);
        element.height += (event.startY - startY);
        startX = event.startX;
        startY = event.startY;
    }
}

const handleMouseUp = () => {
    draging = false;
    startX = startY = 0;
}

需要注意的点

原理并不复杂，需要注意的是，如果mousedown、mousemove和mouseup都监听边框的话，很容易造成鼠标移出边框，从而造成操作终端，没法出发mouseup。 这时候，我们需要监听document的mousemove和mouseup，然后再mouseup事件里面remove掉监听函数即可。

const handleMouseDown = event => {
    draging = true;
    startX = event.screenX;
    startY = event.screenY;
    document.addEventListener('mousemove', handleMouseMove, true);
    document.addEventListener('mouseup', handleMouseUp, true);
}
const handleMouseMove = event => {
    if(draging) {
        // 这里是拖拽下边框和右边框
        // 如果是左边框和上边框，则相反
        element.width += (event.startX - startX);
        element.height += (event.startY - startY);
        startX = event.startX;
        startY = event.startY;
    }
}

const handleMouseUp = () => {
    document.removeEventListener('mousemove', handleMouseMove, true);
    document.removeEventListener('mouseup', handleMouseUp, true);
    draging = false;
    startX = startY = 0;
}

具体demo随后补上，睡了睡了~