React 实现炫酷的可拖拽网格布局

最近老板让做一个自定义面板，能够在面板上自由的拖拽，新增，删除组件。组件可以是各种echarts图形，通过各个组件的拖拽组合，从而让用户自定义想要看到的面板。需求就是这样，那么撸起袖子开始干！:joy:

项目预览

demo地址

组件可以动态添加，删除，可以自由拖拽，缩放。并且缩放后组件内部的echarts图表也会跟着缩放。

项目实战

技术架构

1. 前端框架：React
2. UI库：Ant Design
3. 脚手架： create-react-app
4. 拖拽插件： react-grid-layout

技术实现

1. 使用npm安装react-grid-layout包

npm install react-grid-layout
复制代码

2. 在js文件中引入WidthProvider和Responsive组件，并且实例化响应式拖拽组件。在css文件中引入插件的样式。

import { WidthProvider, Responsive } from "react-grid-layout";
const ResponsiveReactGridLayout = WidthProvider(Responsive);
复制代码

@import '~react-grid-layout/css/styles.css';
@import '~react-resizable/css/styles.css';
复制代码

3. 在React的render方法中渲染可拖拽布局。ResponsiveReactGridLayout组件有多个属性，这里举几个比较重要的说明一下：

• cols：定义了响应式布局划分成几列。
• rowHeight：响应式布局中组件的行高。
• onLayoutChange：当响应式布局中的组件发生拖拽或者放大缩小时触发该函数。

<ResponsiveReactGridLayout
    className="layout"
    {...this.props}
    layouts={this.state.layouts}
    onLayoutChange={(layout, layouts) =>
              this.onLayoutChange(layout, layouts)
            }
   >
     {this.generateDOM()}
</ResponsiveReactGridLayout>
复制代码

4. 通过generateDOM函数生成布局中的组件,首先先遍历组件数组，通过每个组件的类型判断生产柱状图组件，折线组件，还是饼图组件。每个组件必须定义一个全局唯一的key值。data-grid为每一个组件绑定了其属性。下面会介绍具体的data-grid属性。

generateDOM = () => {
    return _.map(this.state.widgets, (l, i) => {
      let option;
      if (l.type === 'bar') {
        option = getBarChart();
      }else if (l.type === 'line') {
        option = getLineChart();
      }else if (l.type === 'pie') {
        option = getPieChart();
      }
      let component = (
        <ReactEcharts
          option={option}
          notMerge={true}
          lazyUpdate={true}
          style={{width: '100%',height:'100%'}}
        />
      )
      return (
        <div key={l.i} data-grid={l}>
          <span className='remove' onClick={this.onRemoveItem.bind(this, i)}>x</span>
          {component}
        </div>
      );
    });
  };
复制代码

5. 通过addItem函数来新增组件。每个组件属性如下：

• x: 组件在x轴坐标
• y: 组件在y轴坐标
• w: 组件宽度
• h: 组件高度
• i: 组件key值

addItem(type,widgetId) {
    const addItem = {
      x: (this.state.widgets.length * 2) % (this.state.cols || 12),
      y: Infinity, // puts it at the bottom
      w: 2,
      h: 2,
      i: widgetId || new Date().getTime().toString(),
    };
    this.setState(
      {
        widgets: this.state.widgets.concat({
          ...addItem,
          type,
        }),
      },
    );
  };
复制代码

6. 通过onRemoveItem函数来移除增组件。

onRemoveItem(i) {
    console.log(this.state.widgets)
    this.setState({
      widgets: this.state.widgets.filter((item,index) => index !=i)
    });

  }
复制代码