javascript - 向节点添加调整大小句柄

Question

我有一个元素，我想在其上显示调整大小的句柄。我当前的代码:

const cursorMove = (e) => {
    if (!curData.doAnimate) {

        mouse.x = e.clientX;
        mouse.y = e.clientY;

        resize = {
            top: mouse.y < curPos.y + settings.resizeMargin,
            right: mouse.x > curPos.x + curPos.w - settings.resizeMargin,
            bottom: mouse.y > curPos.y + curPos.h - settings.resizeMargin,
            left: mouse.x < curPos.x + settings.resizeMargin,
        };
        const {top, right, bottom, left} = resize;

        if (top || left || right || bottom) {
            // mouse over border

            if ((top && left) || (bottom && right)) {
                wrap.style.cursor = 'nwse-resize';
            } else if ((top && right) || (bottom && left)) {
                wrap.style.cursor = 'nesw-resize';
            } else if (top || bottom) {
                wrap.style.cursor = 'ns-resize';
            } else if (left || right) {
                wrap.style.cursor = 'ew-resize';
            }
        } else {
            wrap.style.cursor = 'default';
        }
    }
};

wrap.addEventListener('mousemove', cursorMove);

如您所见，我使用 javascript 为鼠标移动添加事件监听器，每次鼠标移动时我都会检查它是否位于元素的边框上。如果我使用 curData.doAnimate 对节点执行某些操作，我可以关闭事件监听器。如果我移出元素，我可以删除事件监听器，但我认为这不会提高性能。

理想的解决方案是使用 Css 或没有事件监听器永久监听移动事件的解决方案。

提前谢谢你:)

编辑:我只对更改后的光标感兴趣 - 我已经有一个调整节点大小的函数(除非你知道使用一些魔法的 super 巧妙的方法)。

Answer 1

幸运的是，CSS 已经有一个属性来处理这个问题:resize