jQuery UI Resizable：固定子元素位置及限制父元素调整边界不穿透子元素

问题1：调整父div过程中子元素保持不动 #

拖动父div左上边界时，父元素的left/top属性变化会导致绝对定位的子元素跟随移动。将stop事件替换为resize事件，实时反向修正子元素位置，即可让子元素在调整过程中保持不动：

$("#huabu").resizable({
    resize: function(event, ui) {
        // 计算父元素left/top的偏移量
        const leftOffset = ui.position.left - ui.originalPosition.left;
        const topOffset = ui.position.top - ui.originalPosition.top;
        
        // 获取子容器当前的left/top值
        const containerLeft = parseInt($("#tile_container").css("left")) || 0;
        const containerTop = parseInt($("#tile_container").css("top")) || 0;
        
        // 反向修正子容器位置，抵消父元素移动的影响
        $("#tile_container").css({
            left: containerLeft - leftOffset,
            top: containerTop - topOffset
        });
        
        // 重置父元素的原始位置，避免偏移量累积错误
        ui.originalPosition.left = ui.position.left;
        ui.originalPosition.top = ui.position.top;
    }
});

核心逻辑：每次resize触发时，计算父元素的位置偏移量，让子元素向相反方向移动相同距离，视觉上保持静止；同时重置原始位置参数，避免多次触发后计算误差累积。

问题2：限制父div边界不穿透立方体 #

在resize过程中实时判断父元素与立方体容器的位置关系，限制父元素的位置和尺寸范围，确保边界不会覆盖立方体：

$("#huabu").resizable({
    resize: function(event, ui) {
        // 问题1的修正代码...
        
        // 获取父元素与立方体容器的视口位置信息
        const tileContainer = $("#tile_container")[0];
        const tileRect = tileContainer.getBoundingClientRect();
        const parentRect = ui.element[0].getBoundingClientRect();
        
        // 限制父元素左边界不超过立方体右边界
        if (ui.position.left > tileRect.right) {
            ui.position.left = tileRect.right;
        }
        // 限制父元素上边界不超过立方体下边界
        if (ui.position.top > tileRect.bottom) {
            ui.position.top = tileRect.bottom;
        }
        // 限制父元素最小宽度，确保容纳立方体宽度
        const minWidth = tileRect.right - ui.position.left;
        if (ui.size.width < minWidth) {
            ui.size.width = minWidth;
        }
        // 限制父元素最小高度，确保容纳立方体高度
        const minHeight = tileRect.bottom - ui.position.top;
        if (ui.size.height < minHeight) {
            ui.size.height = minHeight;
        }
    }
});

核心逻辑：通过getBoundingClientRect()获取元素的视口坐标，实时修正父元素的位置和尺寸，避免边界穿透立方体。

替代实现方案 #

如果jQuery UI Resizable的限制较多，可尝试以下两种方案：

方案1：原生JS自定义拖拽调整 #

只允许拖动右下边界（避免左上拖动的位置偏移问题），同时控制父元素最小尺寸：

const huabu = document.getElementById("huabu");
const resizer = document.createElement("div");
resizer.style.cssText = "position:absolute;right:0;bottom:0;width:15px;height:15px;background:#ccc;cursor:se-resize;";
huabu.appendChild(resizer);

let isResizing = false;
let startX, startY, startWidth, startHeight;

resizer.addEventListener("mousedown", (e) => {
    isResizing = true;
    startX = e.clientX;
    startY = e.clientY;
    startWidth = parseInt(getComputedStyle(huabu).width, 10);
    startHeight = parseInt(getComputedStyle(huabu).height, 10);
    
    document.addEventListener("mousemove", resize);
    document.addEventListener("mouseup", stopResize);
});

function resize(e) {
    if (!isResizing) return;
    const newWidth = startWidth + (e.clientX - startX);
    const newHeight = startHeight + (e.clientY - startY);
    
    // 获取立方体容器的最小尺寸
    const tileContainer = document.getElementById("tile_container");
    const minWidth = tileContainer.offsetWidth;
    const minHeight = tileContainer.offsetHeight;
    
    // 限制父元素最小尺寸
    huabu.style.width = Math.max(newWidth, minWidth) + "px";
    huabu.style.height = Math.max(newHeight, minHeight) + "px";
}

function stopResize() {
    isResizing = false;
    document.removeEventListener("mousemove", resize);
    document.removeEventListener("mouseup", stopResize);
}

方案2：CSS resize + 最小尺寸控制 #

利用CSS原生resize属性实现基础调整，通过CSS直接限制最小尺寸：

#huabu {
    resize: both;
    overflow: auto;
    min-width: 300px; /* 立方体容器的最小宽度 */
    min-height: 300px; /* 立方体容器的最小高度 */
}

该方案仅支持右下边界拖动，但代码极简，适合不需要左上拖动的场景。

内容的提问来源于stack exchange，提问作者Tian_Godgiven