React+dva通過Resizable實現元件拖拽

1、通過npm install –save react-resizable命令安裝依賴包

2、該例項採用的是es6語法，在state中定義初始值。
defaultUpHeight儲存的是拖拽停止時上半部分元件的當前高度
defaultDownDownHeight儲存的是拖拽停止時下半部分元件的當前高度
upHeight和downHeight是進行拖拽時上方和下方元件的高度，此時兩個元件的高度是動態變化的。

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

3、在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、在index.js中使用Resizable，onResize在元件進行拖拽時觸發，onResizeStop在元件停止拖拽時觸發，詳情見程式碼

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);