react插件react-grid-layout拖拽插件的使用，元素的限制单向拖拽（x,y）尚未了解

1、安装两个包

import ReactGridLayout from ‘react-grid-layout’;
import sizeMe from ‘react-sizeme’;

2、创建一个layout/view.js

import React from ‘react’;
import ReactGridLayout from ‘react-grid-layout’;

import sizeMe from ‘react-sizeme’;

let lastGridWidth = 1200;

const GridWrapper = ({
size,
layout,
onLayoutChange,
children,
onDragStop,
onResize,
onResizeStop,
onWidthChange,
className,
isResizable,
isDraggable,
verticalCompact,
preventCollision
}) => {
const width = size.width > 0 ? size.width : lastGridWidth;

if (width !== lastGridWidth) {
lastGridWidth = width;
}

return (
<ReactGridLayout
width={lastGridWidth}
className={className}
isDraggable={isDraggable}
isResizable={isResizable}
measureBeforeMount={false}
containerPadding={[20, 20]}
useCSSTransforms={true}
margin={[20, 20]}
cols={24}
rowHeight={100}
layout={layout}
onResize={onResize}
onResizeStop={onResizeStop}
onDragStop={onDragStop}
onLayoutChange={onLayoutChange}
verticalCompact={verticalCompact}
preventCollision={preventCollision}
>
{children}

);
};

export default sizeMe({ monitorWidth: true })(GridWrapper);

3.使用GridLayout进行包裹拖拽元素

import React, { Suspense, useEffect, useState } from ‘react’;
import { Button, Radio, Tag, Card, Form, Input, Icon, Modal, Tooltip, Popconfirm, message } from ‘antd’;
import { view as GridLayout } from ‘…/…/component/layout’;
import RGL, { WidthProvider } from “react-grid-layout”;
import HomeTitle from “…/…/component/HomeTitle”
import ContainCarousel from “…/…/component/ContainCarousel”
import TabsLeft from “…/…/component/TabsLeft”
import Three from “…/…/component/Three”
import ‘react-grid-layout/css/styles.css’;
import ‘react-resizable/css/styles.css’;
import ‘./index.css’
const { confirm } = Modal;

// const ReactGridLayout = WidthProvider(RGL);

const OverviewComponent = (props) => {
const [visible, setVisible] = useState(false);
const [buttonItem, setButtonItem] = useState(false);
const [noPanelList, setNoPanelList] = useState([])
// 点击修改保存一个初始数据节点initPanelList,initNoPanelList
const [initNoPanelList, setInitNoPanelList] = useState([])
const [initPanelList, setInitPanelList] = useState([])

const [lastGridPos, setLastGridPos] = useState([]) //保存时