0

私は奇妙な問題を抱えています。

HTML ドキュメントにセクションがあり、境界線をドラッグしてサイズを変更しています。

左または下の境界線をドラッグすると、すべて問題なく、セクションのサイズが正しく変更されます。

上または左の境界線をドラッグすると、ボックスのサイズが常に大きくなります。それを除いて、コードをデバッグしているときは、行ごとにステップ実行します。その場合、ボックスはマウスの動きに合わせて正しく拡大または縮小します。

イベント モデル、または完全に理解していないスタイルの調整に何かがあると思います。

これはプロトタイプ コードのみであり、ライブラリは使用していません (単純なバニラ JavaScript のみ)。

// reSizeData is populated by mouse event that start the drag process. It contain the HTMLElement that are resized (node), and which border is being dragged (action)
var reSizeData = {node: null, action: "", inProgress: false}

function reSize(ev){
    ev.stopPropagation();
    var node = reSizeData.node;
    if (node === undefined) return false;
    var borderWidth = styleCoordToInt(getComputedStyle(node).getPropertyValue('border-left-width'));
    // check and set the flag in reSizeData indicating that a resize is in progress.
    // this makes repeated calls to be dropped until current resize event is complete.
    if (reSizeData.inProgress === false) {
        reSizeData.inProgress = true;   
        if (node.getBoundingClientRect) {
            var rect = node.getBoundingClientRect();
            switch (reSizeData.action) {
                case "left" :
                    // this is only working while debugging
                    node.style.width = Math.max(rect.right - ev.clientX, 20) + 'px';
                    node.style.left = ev.clientX + 'px';
                    break;
                case "right" :
                    // this working perfectly
                    node.style.width = Math.max(ev.clientX - rect.left - borderWidth, 20) + 'px';
                    break;
                case "top":
                    // this is only working while debugging
                    node.style.height = Math.max(rect.bottom - ev.clientY, 20) + 'px';
                    node.style.top = ev.clientY + 'px';
                    break;
                case "bottom":
                    // this is working perfectly
                    node.style.height = Math.max(ev.clientY - rect.top - borderWidth, 20) + 'px';
                    break;
            }
            // clear the resize in progress flag
            reSizeData.inProgress = false;
        }
    }
};
4

1 に答える 1