js拖动改变区域大小

先看效果：（拖动蓝色线可改变宽度或者高度）

CSS：

*{margin: 0;padding: 0;}
body,html{width: 100%; height: 100%;background-color: #d2d0d0;}
.line{position: absolute;background-color: rgba(0, 191, 255, 0.3);}
.line[data-direction = "y"]{
    width: 100%;
    height: 7px;
    top: calc(100% - 3px);
    right: 0;
    cursor: n-resize;}
.line[data-direction = "x"]{
    width: 7px;
    height: 100%;
    left: calc(100% - 3px);
    top: 0;
    cursor: e-resize;}
.container{
    width: 1200px;
    height: calc(100% - 2px);
    border: 1px solid #f8f8f8;
    margin: auto;}
.hearder{
    height: 60px;
    border-bottom: 1px solid #f8f8f8;
    position: relative;}
.main{display: flex;height: calc(100% - 60px);}
.left{
    width: 300px;
    height: 100%;
    border-right: 1px solid #f8f8f8;
    position: relative;}
.right{flex: 1;}

HTML结构：

<div class="container">
    <div class="hearder">
        <div class = "line" data-direction = "y" data-according = "header"></div>
    </div>
    <div class="main">
        <div class="left">
            <div class = "line" data-direction = "x" data-according = "left"></div>
        </div>
        <div class="right">
            <div class="hearder">
                <div class = "line" data-direction = "y" data-according = "header1"></div>
            </div>
            <div class="left">
                <div class = "line" data-direction = "x" data-according = "left1"></div>
            </div>
        </div>
    </div>
</div>

drag.js:

function Drag(option) {
    this.option =option,
    this.dir = function (i) {
        let _this = this;
        i.onmousedown = function (e) {
            e = e || window.event;
            let direction = this.getAttribute(_this.option.direct);
            let according = this.getAttribute(_this.option.limitValue);
            let dis = 0;
            if(direction == 'x'){
                dis = e.clientX - this.offsetLeft;
            }else if(direction == 'y'){
                dis = e.clientY - this.offsetTop;
            }
            let that = this;
            document.onmousemove = function (e) {
                e = e || window.event;
                if(direction == 'x'){
                    let dis_x = e.clientX - dis;
                    dis_x = dis_x > _this.option.height.max[according] ? _this.option.height.max[according]: (dis_x < _this.option.height.min[according] ? _this.option.height.min[according]: dis_x);
                    that.parentNode.style.width = dis_x + "px";
                }else if(direction == 'y'){
                    let dis_y = e.clientY - dis;
                    dis_y = dis_y > _this.option.width.max[according] ? _this.option.width.max[according]: (dis_y < _this.option.width.min[according] ? _this.option.width.min[according]: dis_y);
                    that.parentNode.style.height =  dis_y + "px";
                    if(that.parentNode.nextElementSibling){
                        that.parentNode.nextElementSibling.style.height = "calc(100% - " + dis_y + "px)";
                    }
                }
            }
            document.onmouseup = function () {
                document.onmousemove = document.onmousedown = null;
            }
        }
    }
}

调用以及配置：

let option = {
     /* 规定可拖动元素的自定义属性
     * direct：规定拖动方向的：x(调整宽度) || y(调整高度),
     * limitValue：每个可拖动元素类似id的存在，在width/height.max/min下以此属性值做名可设置最大/小 的 宽/高
     */
     direct:"data-direction",
     limitValue: "data-according",
     width:{
         max:{
             header:70,/* data-according属性值为header的最大宽度 */
             header1:140/* data-according属性值为header1的最大宽度 */
         },
         min:{
             header:50,/* data-according属性值为header的最小宽度 */
             header1:50/* data-according属性值为header1的最小宽度 */
         }
     },
     height:{
         max:{
             left:450,/* data-according属性值为left的最大高度 */
             left1:400/* data-according属性值为left1的最大高度 */
         },
         min:{
             left: 150,/* data-according属性值为left的最小高度 */
             left1:200/* data-according属性值为left1的最小高度 */
         }
     }
 }
 /*
  *   拖拽改变区域
  */
 let dragging = new Drag(option);
 let line = document.getElementsByClassName('line');
 for(let i =0;i<line.length;i++){
     dragging.dir(line[i]);
 }