实现拖拽的方式有很多种，css实现可能不是最好的实现方式，仅供参考。

话不多说，先上图

css拖动表格 jquery div可拖动css3_拖拽

需求介绍：主要实现的是 中间区域（红框）内可以托住上下拖动.
功能实现所需：
	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