用鼠标动态调整css网格布局中的列的大小

我想通过用鼠标拖动列分隔符（或调整占位符大小）动态调整css网格布局框的大小。用鼠标动态调整css网格布局中的列的大小

我的nav元素上设置resize: horizontal;来调整，当我拖动的元素的右下角的小调整手柄它得到调整，但相邻列的宽度不会自动调整导致重叠。这是一个破损的codepen。

HTML：

<main> 
<nav>#1</nav> 
<header>#2</header> 
<section>#3</section> 
</main>

CSS：

main { 
    display: grid; 
    border: 3px dotted red; 
    grid-gap: 3px; 
    grid-template-columns: 200px 1fr; 
    grid-template-rows: 100px 1fr; 
    height: 100%; 
} 

nav { 
    grid-column: 1; 
    grid-row: 1; 
    grid-row: 1/span 2; 
    resize: horizontal; 
    overflow: scroll; 
    border: 3px dotted blue; 
}

我预期的CSS网格引擎来自动处理这种情况，但显然事实并非如此。

我用jquery-ui resizable进行了实验，但它似乎不能很好地用于CSS网格。

我正在研究如何使用jquery将网格属性grid-template-columns/rows:设置为动态值，但不清楚如何通过调整大小处理元素来调整元素的大小。 jquery resize事件仅在window对象上触发，而不是在dom元素上触发。

有什么办法可以做到这一点，而不必处理像dragstart/dragend这样的低级别鼠标事件？

来源

2017-09-04 ccpizza

您可以检查我给这里的例子：https://stackoverflow.com/questions/38289204/jquery-ui-draggable-doesnt-resize-other-divs/38553541#38553541我认为这是你是什么寻找... – Dekel

伟大的问题。我认为，一旦这项技术真正传播开来，重新规模化的电网将成为一件重要的事情。至于为什么第二列在拖出第一列时不重新调整大小，我认为这是因为该操作不会重排文档。这里有一个更完整的解释：https://stackoverflow.com/q/37406353/3597276 –

@Dekel：谢谢！将尝试查看它是否可以适应CSS网格布局;否则可能不得不切换到使用浮动。 – ccpizza

的解决方案是不使用明确的固定列大小（grid-template-columns: 200px 1fr;），但使用代替相对列尺寸如grid-template-columns: 0.2fr 1fr; - 然后网格CSS引擎将处理盒相邻的大小调整。接下来是在网格框内添加嵌套div，将它们的最小高度/宽度设置为100％，并通过jqueryui resizable将它们调整大小。

固定jsfiddle。

/* Javscript */ 
 

 
$('.left_inner').resizable(); 
 
$('.right_top_inner').resizable(); 
 
$('.right_bottom_inner').resizable();

/* CSS */ 
 

 
\t .grid { 
 
\t \t display: grid; 
 
\t \t grid-template-columns: 0.2fr 1fr; 
 
\t \t grid-template-rows: 1fr 4fr; 
 
     grid-gap: 3px; 
 
\t \t position: relative; 
 
\t } 
 

 
\t .left { 
 
\t \t grid-row: 1/span 2; 
 
\t } 
 

 
\t .right_top { 
 
\t \t grid-column: 2; 
 
\t \t grid-row: 1; 
 
\t } 
 

 
\t .right_bottom { 
 
\t \t grid-column: 2; 
 
\t \t grid-row: 2; 
 
\t } 
 

 
\t .left_inner { 
 
\t \t background-color: #fedcd2; 
 
\t \t padding: 0; 
 
\t \t width: 100%; 
 
\t \t min-width: 100%; 
 
\t \t height: 100%; 
 
\t \t min-height: 100%; 
 
\t \t text-align: center; 
 
\t } 
 

 
\t .right_top_inner { 
 
\t \t background-color: #f9cf00; 
 
\t \t padding: 0; 
 
\t \t width: 100%; 
 
\t \t min-width: 100%; 
 
\t \t height: 100%; 
 
\t \t min-height: 100%; 
 
\t \t text-align: center; 
 
\t } 
 

 
\t .right_bottom_inner { 
 
\t \t background-color: #f8eee7; 
 
\t \t padding: 0; 
 
\t \t width: 100%; 
 
\t \t min-width: 100%; 
 
\t \t height: 100%; 
 
\t \t min-height: 100%; 
 
\t \t text-align: center; 
 
\t }

<!-- HTML --> 
 

 
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
 

 
\t <main class="grid"> 
 
\t <aside class='left'> 
 
\t <div class="left_inner"> 
 
\t \t drag the bottom right handle to resize 
 
\t </div> 
 
\t </aside> 
 
\t <section class="right_top"> 
 
\t <div class="right_top_inner">right_top_inner</div> 
 
\t </section> 
 
\t <section class="right_bottom"> 
 
\t <div class="right_bottom_inner">right_bottom_inner</div> 
 
\t </section> 
 
\t </main>

❗️虽然这部作品以最简单的情况下，它在现实生活中使用的情况下变得有问题。我尝试了jquery-ui layout，它的工作稍微好一些（这里是demo），但是lib已经过时了，并且出现了框架问题，所以我最终选择了angular-split-pane（基于角度1），它效果很好，尺寸较小。

来源

2017-09-05 21:15:51 ccpizza

用鼠标动态调整css网格布局中的列的大小

回答

相关问题