左右拖拽效果图:

直接上代码:

html:

<div id="box">
  <div id="left"></div>
  <div id="resize"></div>
  <div id="right"></div>
</div>

CSS:

body,html{
  margin:0;
  padding:0;
  height:100%;
}
#box{
  width:600px;
  height:500px;
  overflow:hidden;
}
#left{
  width:calc(30% - 5px);
  height:100%;  
  background:skyblue;
  float:left;
}

#resize{
  width:5px;
  height:100%;
  cursor: w-resize;
  float:left;
}

#right{
  float:right;
  width:70%;
  height:100%;  
  background:tomato;
}

js:

window.onload = function(){
  var resize = document.getElementById("resize");
  var left = document.getElementById("left");
  var right = document.getElementById("right");
  var box = document.getElementById("box");
  resize.onmousedown = function(e){
    var startX = e.clientX;
    resize.left = resize.offsetLeft;
    document.onmousemove = function(e){
      var endX = e.clientX;

      var moveLen = resize.left + (endX - startX);
      var maxT = box.clientWidth - resize.offsetWidth;
      if(moveLen<150) moveLen = 150; 
      if(moveLen>maxT-150) moveLen = maxT-150;

      resize.style.left = moveLen;
      left.style.width = moveLen + "px";
      right.style.width = (box.clientWidth - moveLen - 5) + "px";
    }
    document.onmouseup = function(evt){
      document.onmousemove = null;
      document.onmouseup = null; 
      resize.releaseCapture && resize.releaseCapture();
    }
    resize.setCapture && resize.setCapture();
    return false;
  }
}

上下拖拽效果图:

html:

      <div id="svgBox">
        <div id="svgTop">
          <svg width="100%" id="controllerSvg"></svg>
        </div>
        <div id="svgResize"></div>
        <div id="svgDown" style="border-top: 1px solid #b5b9a9; ">
          <svg width="100%" height="auto" id="serverSvg"></svg>
        </div>
      </div>

CSS:

 #svgBox{
    width:100%;
    height:100%;
    position: relative;
    overflow:hidden;
  }
  #svgTop{
    height:calc(30% - 5px);
    width:100%;
    float:left;
    overflow: auto;
  }

  #svgResize{
    position: relative;
    height:5px;
    width:100%;
    cursor: s-resize;
    float:left;
  }

  #svgDown{
    height:70%;
    width:100%;
    float:left;
    overflow: hidden;
  }

js的methods方法中:

//methods方法中
methods:{
	  dragControllerDiv : function () {
        $(document).ready(function(){
          var svgResize = document.getElementById("svgResize");
          var svgTop = document.getElementById("svgTop");
          var svgDown = document.getElementById("svgDown");
          var svgBox = document.getElementById("svgBox");
          svgResize.onmousedown = function(e){
            var startY = e.clientY;
            svgResize.top = svgResize.offsetTop;
            document.onmousemove = function(e){
              var endY = e.clientY;
              var moveLen = svgResize.top + (endY - startY);
              var maxT = svgBox.clientHeight - svgResize.offsetHeight;
              if(moveLen<30) moveLen = 30;
              if(moveLen>maxT-30) moveLen = maxT-30;
              svgResize.style.top = moveLen;
              svgTop.style.height = moveLen + "px";
              svgDown.style.height = (svgBox.clientHeight - moveLen - 5) + "px";
            }
            document.onmouseup = function(evt){
              document.onmousemove = null;
              document.onmouseup = null;
              svgResize.releaseCapture && svgResize.releaseCapture();
            }
            svgResize.setCapture && svgResize.setCapture();
            return false;
          }}
        )
      },
}

js的mounted方法中:

//mounted()中
mounted(){
	this.dragControllerDiv();
}

这里面要注意的就是，e.clientY/offsetTop 这些属性，都是获取的哪个对象的值，然后根据自己的页面实际调整。结合上面温习的盒子模型，搞清楚层模型中的定位的用法。
发现问题以及反馈：
整个#svgBox的高度未固定住，当上下拖动拖动条时，#svgDown的高度没变，反而是#svgBox的高度在变化。和我们想要的效果恰恰相反，我们预期效果应该是把#svgBox高度固定，拖动的时候，#svgTop和#svgDown的高度随之变化。
更正这个bug，我们根据屏幕分辨率不同，获取到当前屏幕的高度，然后把屏幕高度的40%赋值给#svgBox的高度。代码如下：

 var h  = window.screen.height;
  console.log(h);
  var svgBox = document.getElementById("svgBox");
  svgBox.style.height = h * 0.4 + "px";

此时就可以将#svgBox的高度固定住。