layout 参考文档
https://github.com/react-grid-layout/react-grid-layout#demos

  • 最外层的元素要设置 overflow: ‘hidden’，否则拖拽会有滚动条 ```tsx import { useMemo } from ‘react’; import { WidthProvider, Responsive } from ‘react-grid-layout’; import { array, func, number, object, string } from ‘prop-types’; import { merge } from ‘lodash-es’; import cls from ‘classnames’; import ‘react-grid-layout/css/styles.css’; import ‘react-resizable/css/styles.css’;

const layout = [ { i: ‘a’, x: 0, y: 0, w: 4, h: 1, minW: 3 }, { i: ‘b’, x: 4, y: 0, w: 4, h: 1, minW: 3, maxW: 4 }, { i: ‘c’, x: 8, y: 0, w: 4, h: 1, minW: 3 }, { i: ‘d’, x: 0, y: 1, w: 4, h: 1, minW: 3 }, { i: ‘e’, x: 4, y: 1, w: 4, h: 1, minW: 3 }, ];

// 大屏幕 12列，小屏幕 6列，手机端一列 const defaultCols = { lg: 12, md: 12, sm: 6, xs: 3, xxs: 1 };

ReactGridLayout.propTypes = { dataSource: array.isRequired, onLayoutChange: func.isRequired, gutter: array, rowHeight: number, cols: object, className: string, }; ReactGridLayout.defaultProps = { gutter: [16, 24], rowHeight: 80, };

function ReactGridLayout(props) { const { rowHeight } = props;

const GridLayout = useMemo(() => WidthProvider(Responsive), []);

return (

a
b
c
d
e
) }

export default ReactGridLayout;

  2. - WidthProvider 只监听窗口'resize'事件
  3.    - Response 响应模式下，该属性提供至少一个断点 layouts
  4.    - Size响应式 [https://github.com/ctrlplusb/react-sizeme](https://github.com/ctrlplusb/react-sizeme)
  5. - draggableHandle=".head-title" 只能拖拽的元素
  6. - isBounded 只能在 grid里面拖拽
  8. <a name="pk7ip"></a>
  9. ### rowHeight
  10. 实际像素高度 = (rowHeight * h) + marginH * (h - 1)
  12. - 例如，rowHeight={80}, margin={[24, 24]}，实际元素的高度 = (80 * 3) + 24 * (3-1) =  288
  13. - 宽度会根据多少列，自动计算
  14. - { i: 'a', x: 0, y: 0, w: 4, h: 1, minW: 3 },
  16. ![image.png](https://cdn.nlark.com/yuque/0/2023/png/112859/1690511562812-1f86a95a-5be3-4130-ad47-5a6aabb03689.png#averageHue=%23c6d8f3&clientId=u30ddcccd-3015-4&from=paste&height=76&id=u31e7c8ae&originHeight=168&originWidth=1408&originalType=binary&ratio=2.200000047683716&rotation=0&showTitle=false&size=99589&status=done&style=none&taskId=u098cda6d-a415-446f-a971-0060ddff073&title=&width=639.9999861283738)
  18. <a name="iNQSI"></a>
  19. ## layout布局
  20. ```jsx
  21. const layout = [
  22.   {
  23.     i: 'a', // 组件key值，必须是唯一的
  24.     x: 0, // 组件在x轴坐标，占多少列
  25.     y:  0, // 组件在y轴坐标，
  26.     w: 4, // width 宽度，占据多少列宽
  27.     h: 3, // height 高度，3的意思是 rowHeight 的倍数； 3 * rowHeight 
  28.     // minW: 2, // 最小宽度
  29.   },
  30.   { i: 'b', x: 4, y: 0, w: 4, h: 3 },
  31.   { i: 'c', x: 8, y: 0, w: 4, h: 3 },
  32.   { i: 'd', x: 0, y: 1, w: 4, h: 3 },
  33.   { i: 'e', x: 4, y: 1, w: 4, h: 3 },
  34. ];
  • i 与组件 key相对应的 key
  • static，固定布局，不可以拖拽
    • static: true，以下都为 isDraggable: false, isResizable: false
  • resizeHandles 拖拽手柄，默认只显示右下角手柄

gridItem 属性配置

https://github.com/react-grid-layout/react-grid-layout#grid-item-props
grid配置项要完整，例如：缺少其中一项x, y, w, or h，则会抛出错误
可以设置每个 grid维度的最小值 minH, minW 和最大值 maxH, maxW

  1. {
  2.   // A string corresponding to the component key
  3.   i: string,
  4.   // These are all in grid units, not pixels
  5.   x: number,
  6.   y: number,
  7.   w: number,
  8.   h: number,
  9.   minW: ?number = 0,
  10.   maxW: ?number = Infinity,
  11.   minH: ?number = 0,
  12.   maxH: ?number = Infinity,
  14.   // If true, equal to `isDraggable: false, isResizable: false`.
  15.   static: ?boolean = false,
  16.   // If false, will not be draggable. Overrides `static`.
  17.   isDraggable: ?boolean = true,
  18.   // If false, will not be resizable. Overrides `static`.
  19.   isResizable: ?boolean = true,
  21.   // By default, a handle is only shown on the bottom-right (southeast) corner.
  22.   // Note that resizing from the top or left is generally not intuitive.
  23.   resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
  24.   // If true and draggable, item will be moved only within grid.
  25.   isBounded: ?boolean = false
  26. }

data-grid

  1. import { useMemo } from 'react';
  2. import { WidthProvider, Responsive } from 'react-grid-layout';
  3. import { array, func, number, object, string } from 'prop-types';
  4. import { merge } from 'lodash-es';
  5. import cls from 'classnames';
  6. import 'react-grid-layout/css/styles.css';
  7. import 'react-resizable/css/styles.css';
  9. const dataSource = [
  10.   { label: "Table", value: 1 },
  11.   { label: "List", value: 2 },
  12.   { label: "Card", value: 3 },
  13.   { label: "Chart", value: 4 },
  14.   { label: "Topo", value: 5 }
  15. ];
  17. const defaultCols = { lg: 12, md: 12, sm: 6, xs: 3, xxs: 1 };
  19. ReactGridLayout.propTypes = {
  20.   dataSource: array.isRequired,
  21.   onLayoutChange: func.isRequired,
  22.   gutter: array,
  23.   rowHeight: number,
  24.   cols: object,
  25.   className: string,
  26. };
  27. ReactGridLayout.defaultProps = {
  28.   gutter: [16, 24],
  29.   rowHeight: 80,
  30. };
  32. function ReactGridLayout(props) {
  33.     const {
  34.     rowHeight
  35.   } = props;
  37.   const GridLayout = useMemo(() => WidthProvider(Responsive), []);
  39.   // 性能更好的子节点渲染
  40.   const children = useMemo(() => {
  41.     return dataSource.map((item, index) => {
  42.       const grid = {
  43.         x: (index % 3) * 4, // 组件在x轴坐标
  44.         y: Math.floor(index / 3),
  45.         w: 4,
  46.         h: 3,
  47.         minW: 2,
  48.         // maxW: 12,
  49.         isBounded: true
  50.       };
  52.       return (
  53.         <div
  54.           key={index}
  55.           data-grid={grid}
  56.         >
  57.           {item.label}
  58.         </div>
  59.       );
  60.     });
  61.   }, [dataSource]);
  63.   const onLayoutChange(layout) {
  64.     setState(layout);
  65.     // localStorage.setItem(KEY, JSON.stringify(layout));
  66.   }
  68.   return (
  69.     <GridLayout
  70.       className={cls('__react-grid-layout__', className)}
  71.       // 响应式布局断点
  72.       // layouts={{ lg: layout, md: layout, sm: layout }}
  73.       // layout={layout}
  74.       cols={merge(defaultCols, cols)}
  75.       breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
  76.       rowHeight={rowHeight}
  77.       margin={[24, 24]}
  78.       containerPadding={[0, 0]}
  79.       resizeHandles={['ne', 'se']}
  80.       onLayoutChange={onLayoutChange}
  81.     >
  82.       {children}
  83.     </GridLayout>
  84.   )
  85. }
  87. export default ReactGridLayout;

自定义 GridItem

需要将 style、className、onMouseDown、onMouseUp转发 onTouchEnd到同一个 DOM 节点

  1. const CustomGridItem = React.forwardRef((props, ref) => {
  2.     const {
  3.     style, 
  4.     className, 
  5.     onMouseDown, 
  6.     onMouseUp, 
  7.     onTouchEnd, 
  8.     children, 
  9.     ...rest
  10.   } = props;
  12.   return (
  13.     <div 
  14.       style={{...style}} 
  15.       className={className} 
  16.       ref={ref} 
  17.       onMouseDown={onMouseDown} 
  18.       onMouseUp={onMouseUp} 
  19.       onTouchEnd={onTouchEnd}
  20.     >
  21.       {/* Make sure to include children to add resizable handle */}
  22.       {children}
  23.     </div>
  24.   );
  25. })

draggableHandle 自定义可拖动手柄也需要透传以上属性

resizeHandles 缩放手柄