基于HTML/CSS实现多可拖动缩放窗口的问题求助

问题核心 #

纯HTML/CSS实现多窗口拖动、缩放时，若窗口重叠，后创建的窗口容器会覆盖前一个窗口的缩放区域，阻断交互事件。调整pointer-events、z-index、:hover等属性后仍存在不稳定的层级冲突，需要支持N个窗口的稳定方案。

核心问题分析 #

原实现中，.move_wrapper采用绝对定位且层级设置混乱，窗口重叠时上层容器会遮挡下层窗口的缩放手柄。依赖:hover临时调整层级的方式无法精准控制交互优先级，导致窗口抓取、缩放操作不稳定。

稳定解决方案 #

关键调整点 #

1. 统一窗口层级容器：将每个窗口的拖动、缩放、内容元素归到同一个根容器下，避免跨容器的层级干扰
2. 精准控制交互区域：仅保留头部（拖动）和右下角手柄（缩放）的交互能力，其他区域直接穿透事件
3. 动态层级管理：通过:hover和:active让当前操作的窗口自动提升层级，确保操作不被遮挡

修改后的完整代码 #

CSS

:root {
    --resizer-size: 18px;
}
            
body {
    padding: 0;
    margin: 0;
}

a {
    text-decoration:none;
}

/* 窗口根容器：统一管理层级与定位 */
.window-container {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    min-width: 100px;
    min-height: 64px;
}

/* 鼠标悬停或操作时，窗口自动提升层级 */
.window-container:hover,
.window-container:active {
    z-index: 10;
}

/* 拖动区域：仅头部可触发拖动 */
.window-header {
    background: #196EAC;
    padding: 5px;
    cursor: move;
    text-align: center;
    font-size: 20px;
}

/* 缩放手柄：仅右下角可触发缩放 */
.resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: var(--resizer-size);
    height: var(--resizer-size);
    cursor: nwse-resize;
    background: black;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M13,11H18L16.5,9.5L17.92,8.08L21.84,12L17.92,15.92L16.5,14.5L18,13H13V18L14.5,16.5L15.92,17.92L12,21.84L8.08,17.92L9.5,16.5L11,18V13H6L7.5,14.5L6.08,15.92L2.16,12L6.08,8.08L7.5,9.5L6,11H11V6L9.5,7.5L8.08,6.08L12,2.16L15.92,6.08L14.5,7.5L13,6V11Z" /></svg>');
}

/* 窗口内容容器：负责缩放逻辑 */
.window-content {
    padding: 11px;
    background: #fff;
    font-family: Montserrat, sans-serif;
    resize: both;
    overflow: auto;
    box-shadow:
        inset #009688 0 0 0 5px, 
        inset #059c8e 0 0 0 6px, 
        inset #8ce9ff 0 0 0 10px, 
        inset #48e4d6 0 0 0 11px;
}

.window-body {
    margin: 10px 0;
}

.window-footer {
    background: #196EAC;
    width: 100%;
    text-align: center;
    font-size: 20px;
    padding: 5px 0;
}

HTML

<div class="window-container" style="left: 0; top: 0;">
    <div class="window-header">
        <span>Header Region</span>
    </div>
    <div class="window-content">
        <div class="window-body">
            Let the user resize both the height and the width of this div element.
        </div>
        <div class="window-footer"></div>
    </div>
    <div class="resize-handle"></div>
</div>

<div class="window-container" style="left: 150px; top: 150px;">
    <div class="window-header">
        <span>To Do List</span>
    </div>
    <div class="window-content">
        <div class="window-body">
            Second div I would also like to be able to move around independently like in Windows
        </div>
        <div class="window-footer"></div>
    </div>
    <div class="resize-handle"></div>
</div>

方案优势 #

• 无跨容器层级冲突：每个窗口的所有元素归属于同一容器，层级统一可控
• 精准交互区域：仅保留必要的拖动、缩放触发区域，避免无效区域干扰
• 动态层级提升：操作窗口时自动上浮，确保当前操作不被其他窗口遮挡
• 支持N个窗口：容器结构可无限复用，新增窗口只需复制window-container模块即可

内容的提问来源于stack exchange，提问作者G. Putnam