显示两个相互依赖的“反应网格布局”

Question

我想要两个

react grid layout

。一个位于左侧，项目的大小没有改变。我可以将它们拖放到右侧，然后更改它们的大小或位置。拖动的项目应从左侧移除。我想在两个部分之间有一条分隔线。请看下面的图片，以便您更好地理解。 我已经制作了一个项目，我可以在屏幕上显示两个彼此独立的布局。现在我想让它成为依赖。 我找不到好的例子或教程。预先感谢

Answer 1

我编写的这段代码：

import React, { useState } from "react";
import GridLayout from "react-grid-layout";

const initialLeftItems = [
  { id: "1", title: "Item 1", w: 2, h: 2 },
  { id: "2", title: "Item 2", w: 2, h: 2 },
  { id: "3", title: "Item 3", w: 2, h: 2 },
];

const App = () => {
  const [leftItems, setLeftItems] = useState(initialLeftItems);
  const [rightItems, setRightItems] = useState([]);

  const handleDrag = (layout, oldItem, newItem) => {
    if (layout === "right") {
      setRightItems((prevItems) =>
        prevItems.map((item) =>
          item.id === newItem.i ? { ...item, x: newItem.x, y: newItem.y } : item
        )
      );
    } else {
      setLeftItems((prevItems) =>
        prevItems.filter((item) => item.id !== newItem.i)
      );
      setRightItems((prevItems) => [
        ...prevItems,
        { ...newItem, static: false },
      ]);
    }
  };

  return (
    <div>
      <GridLayout
        className="layout"
        layout={leftItems}
        cols={6}
        rowHeight={30}
        width={300}
        isDraggable={false}
        isResizable={false}
      >
        {leftItems.map((item) => (
          <div key={item.id} className="item">
            {item.title}
          </div>
        ))}
      </GridLayout>
      <div className="separator" />
      <GridLayout
        className="layout"
        layout={rightItems}
        cols={12}
        rowHeight={30}
        width={800}
        onDragStop={(layout, oldItem, newItem) => handleDrag("right", oldItem, newItem)}
        onResizeStop={(layout, oldItem, newItem) => handleDrag("right", oldItem, newItem)}
      >
        {rightItems.map((item) => (
          <div key={item.id} className="item" data-grid={item}>
            {item.title}
          </div>
        ))}
      </GridLayout>
    </div>
  );
};

export default App;

在此示例中，我有两个

GridLayout

组件，一个用于左侧，一个用于右侧。左侧不可拖动或调整大小，并且项目在

leftItems

状态下定义。右侧可拖动且可调整大小，并且项目在

rightItems

状态下定义。

当一个项目从左侧拖动到右侧时，我将其从

leftItems

状态中删除，并将其添加到

rightItems

状态。我还将该项目的静态属性设置为 false，以便可以在右侧拖动它并调整其大小。

只要在右侧拖动项目或调整项目大小，就会调用

handleDrag

函数。它使用项目的新位置和大小更新

rightItems

状态。

最后，我在两个

GridLayout

组件之间有一条分隔线，以在视觉上将它们分开。

希望这有帮助！