用鼠標動態調整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網格佈局中的列的大小

回答

相關問題