使用react-grid-layout心得

1
import GridLayout from "react-grid-layout";
2
class MyFirstGrid extends React.Component {
3
  render() {
4
    // layout is an array of objects, see the demo for more complete usage
5
    const layout = [
6
      { i: "a", x: 0, y: 0, w: 1, h: 2, static: true },
7
      { i: "b", x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
8
      { i: "c", x: 4, y: 0, w: 1, h: 2 }
9
    ];
10
    return (
11
      <GridLayout
12
        className="layout"
13
        layout={layout}
14
        cols={12}
15
        rowHeight={30}
16
        width={1200}
17
      >
18
        <div key="a">a</div>
19
        <div key="b">b</div>
20
        <div key="c">c</div>
21
      </GridLayout>
22
    );
23
  }
24
}

1
import { useState } from "react";
2
import RGL, { WidthProvider } from "react-grid-layout";
3
import './index.css';
4

5
const ReactGridLayout = WidthProvider(RGL);
6
const root = {
7
  width: 600,
8
  height: 480,
9
};
10
type LayoutType = {
11
  i: string;
12
  x: number;
13
  y: number;
14
  w: number;
15
  h: number;
16
  minW?: number;
17
  maxW?: number;
18
  minH?: number;
19
  maxH?: number;
20

21
  static?: boolean;
22
  isDraggable?: boolean; // 是否可移动
23
  isResizable?: boolean; // 是否可改变大小
24
  resizeHandles?: Array<"s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne">;
25
  isBounded?: boolean;
26
};
27
const layout: LayoutType[] = [
28
  {
29
    w: 400,
30
    h: 51,
31
    x: 145,
32
    y: 419,
33
    i: "1.不可拖拽",
34
    minW: 40,
35
    minH: 2,
36
    isDraggable: false
37
  },
38
  {
39
    w: 240,
40
    h: 53,
41
    x: 213,
42
    y: 318,
43
    i: "2.不能改变大小",
44
    minW: 40,
45
    minH: 2,
46
    isResizable: false
47
  },
48
  {
49
    w: 242,
50
    h: 57,
51
    x: 212,
52
    y: 246,
53
    i: "3",
54
    minW: 40,
55
    minH: 2,
56
  },
57
  {
58
    w: 432,
59
    h: 68,
60
    x: 116,
61
    y: 118,
62
    i: "4",
63
    minW: 40,
64
    minH: 2,
65
  },
66
  {
67
    w: 652,
68
    h: 83,
69
    x: 2,
70
    y: 31,
71
    i: "5",
72
    minW: 40,
73
    minH: 2,
74
  },
75
];
76
const GridLayout = () => {
77
  const onLayoutChange = (layout: LayoutType[]) => {
78
    setShowVerticalLine(false);
79
    setShowHorizontal(false);
80
    console.log(layout);
81
  };
82

83
  // 展示横纵轴
84
  const [showVerticalLine, setShowVerticalLine] = useState(false);
85
  const [showHorizontal, setShowHorizontal] = useState(false);
86
  const onLayoutDrag = (
87
    layout: LayoutType[],
88
    oldItem: LayoutType,
89
    newItem: LayoutType
90
  ) => {
91
    // 通过移动过程设置中轴线
92
    const halfWidth = root?.width / 2;
93
    const halfHeight = root?.height / 2;
94
    const { x, y, w, h } = newItem;
95
    setShowVerticalLine(
96
      x + w / 2 >= halfWidth - 2 && x + w / 2 <= halfWidth + 2
97
    );
98
    setShowHorizontal(
99
      y + h / 2 >= halfHeight - 2 && y + h / 2 <= halfHeight + 2
100
    );
101
  };
102
  return (
103
    <div style={{ width: root.width, height: root.height }} className="layout-container" >
104
      {/* 中轴线 */}
105
      <div
106
        className="horizontal-line"
107
        style={{ opacity: showHorizontal ? 1 : 0 }}
108
      ></div>
109
      <div
110
        className="vertical-line"
111
        style={{ opacity: showVerticalLine ? 1 : 0 }}
112
      ></div>
113
      <ReactGridLayout
114
        layout={layout}
115
        // 需要取消各个边的间距 贴边处理
116
        margin={[0, 0]}
117
        containerPadding={[0, 0]}
118
        onLayoutChange={onLayoutChange}
119
        onDragStop={onLayoutChange}
120
        onDrag={onLayoutDrag}
121
        // layout中的元素可以一个放在另一个上
122
        allowOverlap={true}
123
        // 元素可移动的点 s下 e右 se右下
124
        resizeHandles={["s", "se", "e"]}
125
        // 使用容器宽度作为cols
126
        cols={root.width}
127
        rowHeight={1}
128
      >
129
        {layout?.map((item: any, index: number) => {
130
          const { i, zIndex } = item;
131
          return (
132
            <div
133
              style={{
134
                // borderColor: currentId === i ? "#2680eb" : "",
135
                zIndex,
136
              }}
137
              key={i}
138
            >
139
              {i}
140
            </div>
141
          );
142
        })}
143
      </ReactGridLayout>
144
    </div>
145
  );
146
};
147

148
export default GridLayout;

1
.layout-container {
2
  border: 1px solid #d9d9d9;
3
  position: relative;
4
}
5
.react-grid-layout {
6
  height: 100% !important;
7
  width: 100% !;
8
  transition: none;
9
}
10

11
.react-grid-item {
12
  overflow: hidden;
13
  border: 1px dashed #d9d9d9;
14
  cursor: move;
15
  display: flex;
16
  justify-content: center;
17
  align-items: center;
18
}
19
.react-grid-item.cssTransforms {
20
  transition: none;
21
}
22

23
.resizing,
24
.react-grid-item:hover {
25
  border-color: rgb(38, 128, 235);
26
}
27

28
.react-grid-item > .react-resizable-handle-s {
29
  cursor: row-resize;
30
  left: 0;
31
  margin-left: 0;
32
  width: 100%;
33
  height: 8px;
34
  bottom: 0;
35
  transform: none;
36
}
37

38
.react-grid-item > .react-resizable-handle-e {
39
  cursor: col-resize;
40
  top: 0;
41
  margin-top: 0;
42
  width: 8px;
43
  height: 100%;
44
  transform: none;
45
  right: 0;
46
}
47

48
.react-grid-item > .react-resizable-handle {
49
  z-index: 998;
50
  opacity: 0;
51
  position: absolute;
52
}
53

54
.react-grid-item > .react-resizable-handle-se {
55
  height: 20px;
56
  width: 20px;
57
  z-index: 999;
58
  cursor: se-resize;
59
  bottom: 0;
60
  right: 0;
61
}
62

63
.react-grid-placeholder {
64
  background: transparent;
65
}
66
.horizontal-line {
67
  height: 1px;
68
  width: 100%;
69
  background-color: #ff6600;
70
  position: absolute;
71
  top: 50%;
72
  z-index: 999999999;
73
}
74
.vertical-line {
75
  height: 100%;
76
  width: 0.8px;
77
  position: absolute;
78
  left: 50%;
79
  background-color: #ff6600;
80
  z-index: 999999999;
81
}