<main class="layout-column resizable-container" data-resize-basis="60" data-resize-type="row">
<div class="row layout-row resizable resizable-container" data-resize-basis="70" data-resize-type="column">
<section id="panel-1" class="panel resizable"></section>
<section id="panel-2" class="panel resizable"></section>
<div class="resize-bar resize-bar-column"></div>
</div>
<div class="row layout-row resizable resizable-container" data-resize-basis="30" data-resize-type="column">
<section id="panel-3" class="panel resizable"></section>
<section id="panel-4" class="panel resizable"></section>
<div class="resize-bar resize-bar-column"></div>
</div>
<div class="resize-bar resize-bar-row"></div>
</main>
$barSize: 14px;
* {
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
padding: $barSize;
}
main {
position: relative;
height: 100%;
visibility: hidden;
opacity: 0;
}
.row {
position: relative;
}
.panel {
flex: 1;
position: relative;
}
.resize-bar {
position: absolute;
height: $barSize;
width: $barSize;
top: 0;
left: 0;
background: #fff;
}
.resize-bar-column {
height: 100%;
}
.resize-bar-row {
width: 100%;
}
.layout-column {
display: flex;
flex: 1 1 100%;
max-width: 100%;
flex-direction: column;
}
.layout-row {
display: flex;
flex: 1 1 100%;
max-height: 100%;
flex-direction: row;
}
#panel-1 {
background: #ce93d8;
}
#panel-2 {
background: #80deea;
}
#panel-3 {
background: #a5d6a7;
}
#panel-4 {
background: #ffcc80;
}
View Compiled
var body = document.body;
var resizables = $(".resizable-container").map(createResizable);
var requestId = null;
TweenLite.set("main", { autoAlpha: 1 });
$(window).resize(requestResize);
function createResizable(index, element) {
var container = $(element);
var panels = container.children(".resizable");
var panelA = panels[0];
var panelB = panels[1];
var bar = container.children(".resize-bar")[0];
var isColumn = (container.data("resize-type") === "column");
var basis = container.data("resize-basis");
var rect = element.getBoundingClientRect();
var resizable = {
resized: false
};
var cursor;
if (isColumn) {
cursor = "col-resize";
TweenLite.set(bar, { xPercent: -50 });
} else {
cursor = "row-resize";
TweenLite.set(bar, { yPercent: -50 });
}
var draggable = new Draggable(bar, {
cursor: cursor,
bounds: container,
onDrag: resizePanels,
onPress: setAbsolute,
onRelease: setRelative
});
setAbsolute.call(draggable);
resizePanels.call(draggable);
setRelative.call(draggable);
function resizePanels() {
basis = (isColumn ? this.x / rect.width : this.y / rect.height) * 100;
panelA.style.flexBasis = basis + "%";
panelB.style.flexBasis = (100 - basis) + "%";
}
function setAbsolute() {
body.style.cursor = cursor;
if (resizable.resized) {
rect = element.getBoundingClientRect();
resizable.resized = false;
}
if (isColumn) {
TweenLite.set(bar, { left: 0, x: basis * rect.width / 100 });
} else {
TweenLite.set(bar, { top: 0, y: basis * rect.height / 100 });
}
this.update();
}
function setRelative() {
body.style.cursor = "inherit";
if (isColumn) {
TweenLite.set(bar, { x: 0, left: basis + "%" });
} else {
TweenLite.set(bar, { y: 0, top: basis + "%" });
}
}
return resizable;
}
function requestResize() {
cancelAnimationFrame(requestId);
requestId = requestAnimationFrame(resize);
}
function resize() {
var total = resizables.length;
for (var i = 0; i < total; i++) {
resizables[i].resized = true;
}
}
This Pen doesn't use any external CSS resources.