实现拖拽的方式有很多种，css实现可能不是最好的实现方式，仅供参考。
话不多说，先上图
需求介绍：主要实现的是 中间区域（红框）内可以托住上下拖动.
功能实现所需：
resize: css3新增属性，放在div上即可使其可以拖拽，详见:resize介绍文档(https://www.w3school.com.cn/cssref/pr_resize.asp)
cursor:ns-resize，上下拖拽鼠标图标.详见：[cursor属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor)
position:这个就不多说了
-webkit-scrollbar :设置滚动条样式 详见：[滚动条样式](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar)
代码展示：
<!-- 可拖动模版 -->
<!--
建议：最好使用纯html标签，如果其他封装的ui类库标签可能会有不必要的麻烦
另：如果单纯是上下区域，可以忽略.resize__save下的区域分类，不影响整体
-->
<!--
主要区域部分：
.drawer__wrap下区分了.top__info和.bottom__info,也就是上下两部分需要拖拽改变的区域
.top__info中进行了拖拽功能,里面分为了必不可少的三部分
.resize__bar即为拖拽的bar
.resize__line是拖拽线的展示
.resize__save 为主体内容部区域，也就是将展示的内容放在这里（内容根据自己业务定义，没有规定）
-->
<div class="drawer__wrap">
<div class="top__info">
<div class="resize__bar"></div>
<div class="resize__line"></div>
<div class="resize__save">
<div class="tree__info">
左侧栏
</div>
<div class="node__info">
<div class="detail__title">
右侧标题
</div>
<div class="detail__info">
右侧区
</div>
</div>
</div>
</div>
<div class="bottom__info">
下方区域
</div>
</div>
css部分代码：
// css是世界上最难滴‘语言’，择重点讲解，业务不同具体css因人而异，不过大同小异。
首先将上下两部分(.top__info和.bottom__info放在外层.drawer__wrap下运用flex布局进行上下区分)
上面部分（.top__info）的进行position:relative定位，并且设置overflow:hidden进行超出隐藏，以便拖动的时候隐藏不会超出。
.top__info中有三块区域：
1、.resize__save 内容区：设置position:absolute使其与其他区域区分开来，使其可以不受影响，独立展示
其中的top right bottom都设置了0，而bottom设置了10px，是为了留出一个给拖拽div不被盖住的区域
2、.resize__bar 拖拽的bar 其实是一个趴在后面的div,利用这个div放大缩小来控制外层div的放大缩小
bar的height也就是原始top区域的高度，
opacity: 0;来让其视觉隐藏起来
min-height 来设置最小或最大可拖拽的大小
3、.resize__bar::-webkit-scrollbar 因为css3提供的拖拽resize属性只会加到右下角，形成一个小图标，并不能让整块区域可拖拽，所以通过将滚动条放大到与拖拽bar相同的宽度的方式，也将拖拽放大了
4、.resize__line 因为我们将拖拽bar隐藏了，所以我们做一个线来让视觉上可以拖拽（其实拖动的是bar而不是line）
通过position定位的方式将其放到top的底部 right和left设置其所在的位置，让其看起来像一条线。
5、.resize__bar:hover~.resize__line,.resize__bar:active~.resize__line 通过设置样式让鼠标放在线上像是可点击
// 拖动start
.drawer__wrap {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
.top__info {
width: 100%;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
.resize__save {
position: absolute;
top: 0;
right: 0;
bottom: 10px;
left: 0;
overflow-x: hidden;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: center;
.tree__info {
flex: 0 0 35%;
overflow: auto;
}
.node__info {
flex: 0 0 65%;
padding: 8px;
border-left: 1px solid #e5e7eb;
}
}
.resize__bar {
width: 300px;
resize: vertical;
cursor: ns-resize;
opacity: 0;
height: 230px;
overflow: scroll;
min-height: 20px;
}
.resize__bar::-webkit-scrollbar {
width: 300px;
height: inherit;
}
.resize__line {
position: absolute;
right: 45%;
left: 44%;
bottom: 0;
pointer-events: ns-resize;
border-bottom: 3px solid #D8D8D8;
}
.resize__bar:hover~.resize__line,
.resize__bar:active~.resize__line {
border-bottom: 3px solid gray;
}
}
.bottom__info {
width: 100%;
padding: 16px;
box-sizing: border-box;
overflow: hidden;
}
}
// 拖动-end
