基于react-grid-layout实现可视化拖拽

前言

作前端的小伙伴们可能会常常遇到作一个自定义dashboard这样的需求。 那么什么是自定义dashboard呢？自定义dashboard其实就是一个自定义面板，用户可以在面板上自由的拖拽，新增，删除组件。组件能够是各类echarts图形，也但是各类数据表格。经过各个组件的拖拽组合，从而让用户自定义想要看到的面板。

项目预览

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. Render渲染

在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.组件DOM生成

经过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)
    });

  }
复制代码

后记

感谢支持。若不足之处，欢迎你们指出，共勉。

若是以为不错，记得 点赞，谢谢你们 😂

欢迎关注 个人：【Blog】【Github】【掘金】【简书】