React+dva实现组件拖拽

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 (
    

      width: '100%', height: 870}}>
        "330" style={{height: 870}}>
          800}
            onResizeStop={(e, d, ev, ds) => {
              onResizableStop(ds)
            }}
            onResize={(e, direction, ref, d) => {
              onResizable(d);
            }}
          >
            "Card1"}
              bordered={true}
              style={{width: 330, height: upHeight, userSelect: 'none'}}
              bodyStyle={{height: upHeight - 30, padding: 12}}
            >
              Card1
            
          
          "Card2"}
            bordered={true}
            style={{width: 330, height: downHeight, userSelect: 'none'}}
            bodyStyle={{height: downHeight - 30, padding: 12}}
          >
            Card2
          
        
      
    
  )
}

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

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

5、进行拖拽时高度动态变化，效果图如下：

Resizable的使用详情可见https://react.ctolib.com/react-resizable-box.html