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

更新时间：2024-12-22 19:58:40

做前端的小伙伴们可能会经常遇到做一个自定义dashboard这样的需求。

那么什么是自定义dashboard呢？自定义dashboard其实就是一个自定义面板，用户能够在面板上自由的拖拽，新增，删除组件。组件可以是各种echarts图形，也可是各种数据表格。通过各个组件的拖拽组合，从而让用户自定义想要看到的面板。

demo地址

源码地址

首先，在js文件中引入WidthProvider和Responsive组件，并且实例化响应式拖拽组件。

其次，在css文件中引入插件的样式。

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

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

每个组件属性如下：

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

如果觉得不错，记得点赞，谢谢大家 😂