拖拽动态宽度Div：父容器自适应扩展及拖拽流畅性问题求助

核心改进 #

• 取消延迟操作和平滑滚动，改用即时同步逻辑，彻底解决拖拽卡顿问题
• 监听window全局鼠标事件，确保鼠标移出父容器后仍能触发扩展与拖拽
• 同时支持水平、垂直两个方向的容器动态扩展
• 简化状态管理，避免重复事件绑定与内存泄漏

完整代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Drag & Expand Container</title>
</head>
<body>
    <div id="main">
        <div id='parent'>
            <div id='elem'></div>
        </div>
    </div>
</body>
</html>

CSS #

#elem {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: black;
    user-select: none;
    cursor: grab;
}

#elem:active {
    cursor: grabbing;
}

#parent {
    height: 200px;
    width: 200px;
    overflow: visible;
    position: relative;
    display: inline-block;
    box-shadow: 20px 0 20px 0 grey;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=");
}

#main {
    width: 250px;
    height: 250px;
    overflow: auto;
    border: 1px solid grey;
}

JavaScript #

function $(el) {
    return document.getElementById(el);
}

let isDragging = false;
let dragOffset = { x: 0, y: 0 };
const parentEl = $('parent');
const elemEl = $('elem');
const mainEl = $('main');

function startDragging(evt) {
    isDragging = true;
    const elemRect = elemEl.getBoundingClientRect();
    
    // 计算鼠标与子元素左上角的偏移量，确保拖拽时鼠标位置相对不变
    dragOffset.x = evt.clientX - elemRect.left;
    dragOffset.y = evt.clientY - elemRect.top;

    // 绑定全局事件，解决鼠标移出容器后无响应的问题
    window.addEventListener('mousemove', handleDrag);
    window.addEventListener('mouseup', stopDragging);
}

function handleDrag(evt) {
    if (!isDragging) return;

    const parentRect = parentEl.getBoundingClientRect();
    // 计算子元素在父容器内的目标坐标
    let targetX = evt.clientX - parentRect.left - dragOffset.x;
    let targetY = evt.clientY - parentRect.top - dragOffset.y;

    const elemWidth = elemEl.offsetWidth;
    const elemHeight = elemEl.offsetHeight;

    // 水平方向扩展逻辑：当子元素右侧超出父容器时，扩展父容器宽度
    const requiredWidth = targetX + elemWidth;
    if (requiredWidth > parentEl.offsetWidth) {
        parentEl.style.width = `${requiredWidth}px`;
    }

    // 垂直方向扩展逻辑：当子元素底部超出父容器时，扩展父容器高度
    const requiredHeight = targetY + elemHeight;
    if (requiredHeight > parentEl.offsetHeight) {
        parentEl.style.height = `${requiredHeight}px`;
    }

    // 更新子元素位置
    elemEl.style.left = `${targetX}px`;
    elemEl.style.top = `${targetY}px`;

    // 即时同步滚动，确保子元素始终在可视范围内
    const elemRect = elemEl.getBoundingClientRect();
    const mainRect = mainEl.getBoundingClientRect();

    // 水平滚动调整
    if (elemRect.right > mainRect.right) {
        mainEl.scrollLeft += elemRect.right - mainRect.right;
    } else if (elemRect.left < mainRect.left) {
        mainEl.scrollLeft -= mainRect.left - elemRect.left;
    }

    // 垂直滚动调整
    if (elemRect.bottom > mainRect.bottom) {
        mainEl.scrollTop += elemRect.bottom - mainRect.bottom;
    } else if (elemRect.top < mainRect.top) {
        mainEl.scrollTop -= mainRect.top - elemRect.top;
    }
}

function stopDragging() {
    isDragging = false;
    // 解绑全局事件，避免内存泄漏和意外触发
    window.removeEventListener('mousemove', handleDrag);
    window.removeEventListener('mouseup', stopDragging);
}

// 绑定初始拖拽触发事件
elemEl.addEventListener('mousedown', startDragging);

关键逻辑说明 #

1. 全局事件绑定：拖拽开始时绑定window的mousemove和mouseup，确保鼠标移出父容器后仍能继续响应拖拽动作，解决“仅鼠标移动时生效”的问题
2. 即时扩展容器：通过计算子元素的边缘位置，实时判断是否需要扩展父容器的宽/高，扩展尺寸与子元素偏移量完全匹配
3. 无延迟滚动：直接修改scrollLeft/scrollTop值，替代平滑滚动，确保滚动与拖拽动作完全同步，消除卡顿
4. 状态清理：拖拽结束后立即解绑全局事件，避免不必要的资源占用

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