用鼠标动态调整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这样的低级别鼠标事件?
的解决方案是不使用明确的固定列大小(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),它效果很好,尺寸较小。
您可以检查我给这里的例子:https://*.com/questions/38289204/jquery-ui-draggable-doesnt-resize-other-divs/38553541#38553541我认为这是你是什么寻找... – Dekel
伟大的问题。我认为,一旦这项技术真正传播开来,重新规模化的电网将成为一件重要的事情。至于为什么第二列在拖出第一列时不重新调整大小,我认为这是因为该操作不会重排文档。这里有一个更完整的解释:https://*.com/q/37406353/3597276 –
@Dekel:谢谢!将尝试查看它是否可以适应CSS网格布局;否则可能不得不切换到使用浮动。 – ccpizza