div 드래그 크기 변경 (가로)

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: e-resize;
  float:left;
}

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

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){ //resize  onmousedown
    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; // 150
      if(moveLen>maxT-150) moveLen = maxT-150; // 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;
  }
}