拖拽修改宽度

     

          

            　

// 这里写内容

           　  左侧线

        　

           

             　

// 右边内容

          　

        

 

handleMouseDown = () => {

    document.ondragstart = (e) => {

      e.preventDefault();

    };

    document.ondragend = (e) => {

      e.preventDefault();

    };

    document.onmousemove = (ev) => {

      const ele = document.getElementById('left');

      const eve = ev || window.event;

      const left = this.getOffsetPosition(ele);

      const width = eve.clientX - left;

      if (width >= 244 && width < 800) {

        this.setState({

          width,

        });

      }

      document.onmouseup = () => {

        document.onmousemove = null;

        document.onmousedown = null;

      };

    };

  }

  getOffsetPosition = (ele, x) => {

    const left = x || 0;

    if (ele.offsetParent != null) {

      return this.getOffsetPosition(ele.offsetParent, ele.offsetLeft + left);

    }

    return left;

  }

 

.dropLine {

    background: #e0e0e0;

    width: 1px;

    min-height: calc(~"100vh - 70px");

    height: 100%;

    top: 0px;

    z-Index: 0;

    right: 0px;

    cursor: w-resize;

    position: absolute;

}

.dropLine::after {

    position: absolute;

    left: -6px;

    top: 0px;

    height: 100%;

    width: 14px;

    content: '';

    display: block;

}