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

栏目: 服务器 · 发布时间: 1周前

来源: juejin.im

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

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

项目预览

demo地址

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

组件可以动态添加,删除,可以自由拖拽,缩放。并且缩放后组件内部的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
复制代码
  1. 在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';
复制代码
  1. 在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>
复制代码
  1. 通过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>
      );
    });
  };
复制代码
  1. 通过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,
        }),
      },
    );
  };
复制代码
  1. 通过onRemoveItem函数来移除增组件。
onRemoveItem(i) {
    console.log(this.state.widgets)
    this.setState({
      widgets: this.state.widgets.filter((item,index) => index !=i)
    });

  }
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

DIV+CSS网站布局从入门到精通

DIV+CSS网站布局从入门到精通

2011-1 / 58.00元

《DIV+CSS网站布局从入门到精通》介绍了商业类型的网页设计,以及目前流行的div+CSS标准布局方法和实战技法。通过十个经典案例,分别从不同类型网站的布局风格以及实现方法来讲解div+CSS网页布局和制作方法。全书系统地讲解了CSS样式的基础理论和实际运用技术,并结合实例来讲解层叠样式表与层布局相结合制作网页的方法。在实例制作过程中除了介绍CSS样式设计各方面的知识外,还结合实际网页制作中可能......一起来看看 《DIV+CSS网站布局从入门到精通》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具