使用 HTML / CSS 的多个可移动、可调整大小的窗口

问题描述 投票：0回答：1

我尝试仅使用 HTML / CSS 制作多个可移动的可调整大小的窗口。

基于 CSS-Tricks 的这篇文章我制作了两个窗口，它们都可以移动。

但是，如果将第二个窗口放置在第一个窗口的右侧，则第二个窗口会干扰第一个窗口。

第二组的 

.move_wrapper
覆盖第一组 
.mover
的“调整大小”区域并阻止事件。

尝试了指针事件、显示、z-index 的组合，但目前似乎没有尝试解决该问题。

有人知道是否有办法让两个窗口像下面这样，同时让它们无论在哪里都可以移动？并且优先选择可以毫无问题地扩展到 N 个窗口的东西。

function main(){
    // Empty function, not what was necessary for snippets
}
  
    
:root {
    /* variables for use in var() functions ex: 'display: var(--menuDisplay);'
    --menuDisplay: "none";
    */
    
    --resizer-size: 18px;
}
            
body {
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration:none;
}

.move_wrapper {
    width: min-content;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -2;
}

.mover {
    width: 100px;
    height: 100px;
    min-width: 64px;
    min-height: 64px;
    resize: both;
    overflow: hidden;
}

.mover:hover {
}

.mover_grab {
    pointer-events: none;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: var(--resizer-size);
    height: var(--resizer-size);
}

.mover_grab:hover ~ .move_wrapper {
    background: #196EAC;
    z-index: 1;
}
    

.mover_icon {
    pointer-events: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: var(--resizer-size);
    height: var(--resizer-size);
    z-index: -1;
    
    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.5\
      L11,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>')
}

.base_node_frame {
    pointer-events: auto;
    
    position: absolute;
    top: 0px;
    left: 0px;
    
    min-width: 100px;
    padding: 11px;
    z-index: -1;
    display: flex;
    flex-flow: column;
    
    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;
}

.base_node_header {
    background: #196EAC;
    
    width: calc( 100% - 10px );
    padding: 5px;
    z-index: -1;
    flex: 0 1 auto;
    
    font-size: 20px;
    text-align: center;
}

.base_node {
    background: #fff;
    font-family: Montserrat, sans-serif;
    z-index: -1;
    flex: 1 1 auto;
}

.base_node_footer {
    background: #196EAC;
    
    width: 100%;
    flex: 0 1 auto;
    z-index: -1;
    
    font-size: 20px;
    text-align: center;
}
<div class="move_wrapper">
    <div class="mover_grab">
        <div class="base_node_frame">
            <div class="base_node_header"><div class="mover_icon"></div><span>Header Region</span></div>
            <div class="base_node">Let the user resize both the height and the width of this div element.</div>
            <div class="base_node_footer"></div>
        </div>
    </div>
    <div class="mover"></div>
</div>
<div class="move_wrapper">
    <div class="mover_grab">
        <div class="base_node_frame">
            <div class="base_node_header"><div class="mover_icon"></div><span>To Do List</span></div>
            <div class="base_node">Second div I would also like to be able to move around independently like in Windows</div>
            <div class="base_node_footer"></div>
        </div>
    </div>
    <div class="mover" style="width: 150px; height: 150px;"></div>
</div>

编辑2023年12月12日

使用 

:hover
效果对 
.mover_wrapper
进行轻微改进。问题是它会产生大量的 Z 深度战斗，所以它并不是一个真正的解决方案。它允许移动窗口，但仍然对是否能可靠地抓住它们很挑剔。

function main(){
    // Empty function, not what was necessary for snippets
}
  
    
:root {
    /* variables for use in var() functions ex: 'display: var(--menuDisplay);'
    --menuDisplay: "none";
    */
    
    --resizer-size: 18px;
}
            
body {
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration:none;
}

.move_wrapper {
    width: min-content;
    position: absolute;
    left: 0px;
    top: 0px;
    visibility: hidden;
    z-index: -2;
}

.move_wrapper:hover {
    z-index: -3;
}

.mover {
    width: 100px;
    height: 100px;
    min-width: 64px;
    min-height: 64px;
    resize: both;
    overflow: hidden;
    visibility: visible;
    opacity: 0;
}

.mover_grab {
    pointer-events: none;
    position: absolute;
    bottom: 0px;
    right: 0px;
    visibility: visible;
    width: var(--resizer-size);
    height: var(--resizer-size);
}
    
.mover_icon {
    pointer-events: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: var(--resizer-size);
    height: var(--resizer-size);
    z-index: -1;
    
    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.5\
      L11,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>')
}

.base_node_frame {
    pointer-events: auto;
    
    position: absolute;
    top: 0px;
    left: 0px;
    
    min-width: 100px;
    padding: 11px;
    z-index: -1;
    display: flex;
    flex-flow: column;
    
    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;
}

.base_node_header {
    background: #196EAC;
    
    width: calc( 100% - 10px );
    padding: 5px;
    z-index: -1;
    flex: 0 1 auto;
    
    font-size: 20px;
    text-align: center;
}

.base_node {
    background: #fff;
    font-family: Montserrat, sans-serif;
    z-index: -1;
    flex: 1 1 auto;
}

.base_node_footer {
    background: #196EAC;
    
    width: 100%;
    flex: 0 1 auto;
    z-index: -1;
    
    font-size: 20px;
    text-align: center;
}
<div class="move_wrapper">
    <div class="mover_grab">
        <div class="base_node_frame">
            <div class="base_node_header"><div class="mover_icon"></div><span>Header Region</span></div>
            <div class="base_node">Let the user resize both the height and the width of this div element.</div>
            <div class="base_node_footer"></div>
        </div>
    </div>
    <div class="mover"></div>
</div>
<div class="move_wrapper">
    <div class="mover_grab">
        <div class="base_node_frame">
            <div class="base_node_header"><div class="mover_icon"></div><span>To Do List</span></div>
            <div class="base_node">Second div I would also like to be able to move around independently like in Windows</div>
            <div class="base_node_footer"></div>
        </div>
    </div>
    <div class="mover" style="width: 150px; height: 150px;"></div>
</div>

html css drag-and-drop resize draggable
1个回答
0
投票

您还没有解释您要解决的问题。所以我将提供一个答案来告诉你如何解决这个问题。

网络套接字。

让网络浏览器处理可调整大小的窗口和所有其他东西的复杂性。让您能够专注于使用基本 HTML 和 CSS 轻松显示的内容。

用户打开；

  1. /第1页
  2. /第2页

然后 Web Sockets 处理两者之间的通信。

不确定这是否相关，但考虑到没有关于试图解决的根本问题的上下文，需要考虑一些事情。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.