項目背景：react+ts+less 常見使用按鈕來實現(xiàn)側(cè)邊菜單縮起/展開，現(xiàn)用代碼實現(xiàn)側(cè)邊欄拖拽寬度改變。

具體代碼實現(xiàn)：

... react 類組件 部分關(guān)鍵代碼
 constructor(props: any) {
    super(props)
    this.state = {
      leftSideWidth: 300, // 側(cè)邊欄寬度
      tempWidth: 300,
      dragObject: {
        x: 0,
        y: 0
      }
    }
  }

  // 一般是在 mousedown 或者 dragstart 時觸發(fā)
  dragInit = (e: any) => {
    this.setState({ dragObject: { x: e.pageX, y: e.pageY } })
    window.addEventListener('mousemove', this.drag);
    window.addEventListener('mouseup', this.dragEnd);
    this.startDrag();
  }
  drag = (e: any) => {
    this.onMove(e.pageX - this.state.dragObject.x, e.pageY - this.state.dragObject.y);
  }
  dragEnd = () => {
    window.removeEventListener('mousemove', this.drag);
    window.removeEventListener('mouseup', this.dragEnd);
    this.setState({ dragObject: { x: 0, y: 0 } })
  }
  // 左側(cè)拖動
  onMove = (dx: any, dy: any) => {
    let width = this.state.tempWidth + dx
    let leftSideWidth = width < 200 ? 200 : width > 480 ? 480 : width // 最小200 最大480
    this.setState({ leftSideWidth: leftSideWidth })
  }
  startDrag = () => {
    this.setState({ tempWidth: this.state.leftSideWidth })
  }


render() {
    return (
      <div className='pages'>
        <div>
          <div className='line-left' style={{ width: this.state.leftSideWidth + 'px' }}>
            <h4>left</h4>
            <div className="drag-line" onMouseDown={this.dragInit}></div>
          </div>
        </div>
        <div>
          <h5>context</h5>
        </div>
      </div>
    );
  }

樣式關(guān)鍵部分：
cursor: col-resize;可出現(xiàn)雙向箭頭樣式

.line-left {
    height: 100vh;
    position: relative;
}
// 拖拽線
.drag-line {
  width: 4px;
  background: transparent;
  cursor: col-resize;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
 &:hover {
    background-color: #bfbfbf;
  }
}

最終效果圖

側(cè)邊欄拖拽