项目中经常会用到左右分栏布局方式，一般情况左侧面板大小都是固定的，但是有时会有需求做成拖拽式的，能够自由拖拽调整面板大小。(作为当年的资深Java Swing开发人员，对于JSplitPane印象深刻。。。)

一般在web应用中的实现方式是封装成组件，通过JavaScript添加事件监听来实现。

今天给大家介绍的是一种新的实现方式，不通过JavaScript，只借助借助CSS的resize属性，

就可以实现交互式的可拖拽分割面板。

请参考以下代码部分，具体实现和技术细节，代码中已经做了注释。

LESS代码如下(如果想要CSS格式，请查看本页面源代码)

@divider_color: #ccc; //分隔条颜色

@divider_hover_color: #17a2b8;//hover时分隔条颜色

@horizontal_left_size: 200px;//左右布局时，左侧面板宽度

@vertical_top_size: 100px;//上下布局是，上册面板宽度

.split {

overflow: hidden;

border: 1px solid #ccc;

width: 100%;

height: 100%;

.split {

border: none;

}

.resize {

overflow: scroll;

opacity: 0; //通过透明度将resize设置为不可见，但是仍然可以交互

&::-webkit-scrollbar { //设置resize的大小，只有webkit的浏览器支持

width: 100%;

height: 100%;

}

}

.divider {

position: absolute;

pointer-events: none; //禁止divider影响鼠标事件

}

.content {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

}

&.horizontal {//横向布局

> div:first-child { //左侧面板

overflow: hidden;

float: left;

position: relative;

height: 100%;

.resize {

width: @horizontal_left_size; //★左侧面板的预置宽度

height: 100%;

resize: horizontal;

&:hover ~ .divider, &:active ~ .divider {

border-left-color: @divider_hover_color;

border-left-style: dashed;

}

}

.divider {

right: 0;

top: 0;

bottom: 0;

border-left: 1px solid @divider_color;

border-right: 2px solid transparent;

}

.content {

right: 4px; //content不能充满左侧面板，否则会覆盖resize面板

}

}

> div:last-child { //右侧面板

position: relative;

overflow: hidden;

height: 100%;

box-sizing: border-box;

}

}

&.vertical {//纵向布局

> div:first-child { //上侧面板

overflow: hidden;

position: relative;

.resize {

height: @vertical_top_size; //★上册面板的预置高度

width: 100%;

resize: vertical;

&:hover ~ .divider, &:active ~ .divider {

border-top-color: @divider_hover_color;

border-top-style: dashed;

}

}

.divider {

left: 0;

right: 0;

bottom: 0;

border-top: 1px solid @divider_color;

border-bottom: 2px solid transparent;

}

.content {

bottom: 4px;

}

}

> div:last-child { //下侧面板

position: relative;

overflow: hidden;

width: 100%;

box-sizing: border-box;

}

}

}

//针对Firefox浏览器

@-moz-document url-prefix() {

.resize {

overflow: auto !important;

opacity: 1 !important;

}

}

测试代码和呈现效果如下:

left

right-top

right-top

left

right-top

right-top

请注意，resize有浏览器的兼容性问题，本实现只针对支持resize属性的浏览器。