React+dva implements component drag through Resizable

1. Install dependency package through npm install – save react resizable command

2. This example uses es6 syntax to define the initial value in state.
defaultUpHeight saves the current height of the top half of the component when the drag stops
defaultDownDownHeight saves the current height of the lower part of the component when the drag stops
The up height and down height are the height of the upper and lower components when dragging. At this time, the height of the two components changes dynamically.

 state: {
    defaultUpHeight: 410,
    defaultDownHeight: 455,
    upHeight: 410,
    downHeight: 455,
  },

3. Get the height after the change in models/demo.js

effects: {
    * onResizable({payload}, {put}) {
      yield put({
        type: 'updateState',
        payload: {
          upHeight: payload.upHeight,
          downHeight: payload.downHeight
        }
      })
    },
  },
  * onResizableStop({payload}, {put}) {
    yield put({
      type: 'updateState',
      payload: {
        defaultUpHeight: payload.defaultUpHeight,
        defaultDownHeight: payload.defaultDownHeight,
      }
    })
  },

4. Use Resizable in index.js. onResize is triggered when the component is dragged, and onResizeStop is triggered when the component stops dragging. See the code for details

import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import {Layout, Card} from 'antd';
import Resizable from 're-resizable';

const {Sider} = Layout;

function Demo({location, demo, loading, dispatch}) {
  const {defaultUpHeight, defaultDownHeight, upHeight, downHeight} = demo
  const onResizable = (d) => {
    dispatch({
      type: 'demo/onResizable',
      payload: {
        upHeight: defaultUpHeight + d.height,
        downHeight: defaultDownHeight - d.height,
      }
    })
  };
  const onResizableStop = (ds) => {
    dispatch({
      type: 'demo/onResizableStop',
      payload: {
        defaultUpHeight: defaultUpHeight + ds.height,
        defaultDownHeight: defaultDownHeight - ds.height,
      }
    })
  };
  const style = {
    display: 'flex',
    border: 'solid 1px #ddd',
    backgroundColor: '#ffffff',
  };
  return (
    <div>
      <Layout style={{width: '100%', height: 870}}>
        <Sider width="330" style={{height: 870}}>
          <Resizable
            style={style}
            maxHeight={800}
            onResizeStop={(e, d, ev, ds) => {
              onResizableStop(ds)
            }}
            onResize={(e, direction, ref, d) => {
              onResizable(d);
            }}
          >
            <Card
              title={"Card1"}
              bordered={true}
              style={{width: 330, height: upHeight, userSelect: 'none'}}
              bodyStyle={{height: upHeight - 30, padding: 12}}
            >
              Card1
            </Card>
          </Resizable>
          <Card
            title={"Card2"}
            bordered={true}
            style={{width: 330, height: downHeight, userSelect: 'none'}}
            bodyStyle={{height: downHeight - 30, padding: 12}}
          >
            Card2
          </Card>
        </Sider>
      </Layout>
    </div>
  )
}

Demo.propTypes = {
  demo: PropTypes.object,
  loading: PropTypes.object,
};

export default connect(({demo, loading}) => ({demo, loading}))(Demo);

5. The height changes dynamically when dragging. The effect chart is as follows:

See the details of the use of Resizable https://react.ctolib.com/react-resizable-box.html