```
import React, { useState } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import { ItemTypes } from './ItemTypes';

const style = {
  border: '1px solid gray',
  padding: '0.5rem 1rem',
  marginBottom: '.5rem',
  backgroundColor: 'white',
  cursor: 'move',
};

const Element = ({ id, text, moveElement }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.ELEMENT, id, text },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });
  const [, drop] = useDrop({
    accept: ItemTypes.ELEMENT,
    drop: (item) => {
      moveElement(item.id, id);
    },
  });

  return (
    <div ref={(node) => drag(drop(node))} style={{ ...style, opacity: isDragging ? 0.5 : 1 }}>
      {text}
    </div>
  );
};

const Container = ({ elements, moveElement }) => {
  return (
    <div>
      {elements.map((element, index) => (
        <Element key={element.id} id={element.id} text={element.text} moveElement={moveElement} />
      ))}
    </div>
  );
};

const App = () => {
  const [elements1, setElements1] = useState([
    { id: 1, text: 'Element 1' },
    { id: 2, text: 'Element 2' },
    { id: 3, text: 'Element 3' },
  ]);
  const [elements2, setElements2] = useState([
    { id: 4, text: 'Element 4' },
    { id: 5, text: 'Element 5' },
    { id: 6, text: 'Element 6' },
  ]);

  const moveElement = (id, atIndex) => {
    const element = elements1.find((e) => e.id === id);
    const newElements1 = elements1.filter((e) => e.id !== id);
    setElements1(newElements1);
    setElements2((prevElements2) => [...prevElements2.slice(0, atIndex), element, ...prevElements2.slice(atIndex)]);
  };

  return (
    <div style={{ display: 'flex' }}>
      <Container elements={elements1} moveElement={moveElement} />
      <Container elements={elements2} moveElement={moveElement} />
    </div>
  );
};
```

export default App；

このコードでは、div 内の要素を整列したり分離したりする機能を実現するために、関数とパッケージを使用します。Draguse Dropreact- dnd Containerを使用する2つのコンテナがあります。
これらのコンテナの中には要素の行列があり、各要素はコンポーネントで表されます。コンポーネントは、その配置と分離の動作を定義するために y を使用します。エレメント エレメント使用 ドラッグユース ドロップ

コンポーネントには、各コンテナに要素を格納する2つのエリアがあります。この関数は、コンテナから別のコンテナに要素を移動するために使用されます。

Reactで要素を整列したり分離したりする機能を実装する方法を理解する助けになれば幸いです。

まだ理解されていないかもしれませんが、このコードは非常に興味深いものです。それは、2つのカゴがあり、そのカゴの中にたくさんのフィーチャがあるようなものです。各カハには「エレメント1」、「エレメント2」などの名前が付けられている。

このコードディゴを使えば、フィーチャを1つ取り出して、カサからカサへと並べ替えることができる。また、あるカゴから別のカゴに移し替えることもできる。

ブロックを使ったゲームと同じですが、ブロックの代わりに、コンピュータの中のあるカゴから別のカゴへ名前を移動させることができます。
import React, { useState } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import { ItemTypes } from './ItemTypes';

const style = {
  border: '1px solid gray',
  padding: '0.5rem 1rem',
  marginBottom: '.5rem',
  backgroundColor: 'white',
  cursor: 'move',
};

const Element = ({ id, text, moveElement }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.ELEMENT, id, text },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });
  const [, drop] = useDrop({
    accept: ItemTypes.ELEMENT,
    drop: (item) => {
      moveElement(item.id, id);
    },
  });

  return (
    <div ref={(node) => drag(drop(node))} style={{ ...style, opacity: isDragging ? 0.5 : 1 }}>
      {text}
    </div>
  );
};

const Container = ({ elements, moveElement }) => {
  return (
    <div>
      {elements.map((element, index) => (
        <Element key={element.id} id={element.id} text={element.text} moveElement={moveElement} />
      ))}
    </div>
  );
};

const App = () => {
  const [elements1, setElements1] = useState([
    { id: 1, text: 'Element 1' },
    { id: 2, text: 'Element 2' },
    { id: 3, text: 'Element 3' },
  ]);
  const [elements2, setElements2] = useState([
    { id: 4, text: 'Element 4' },
    { id: 5, text: 'Element 5' },
    { id: 6, text: 'Element 6' },
  ]);

  const moveElement = (id, atIndex) => {
    const element = elements1.find((e) => e.id === id);
    const newElements1 = elements1.filter((e) => e.id !== id);
    setElements1(newElements1);
    setElements2((prevElements2) => [...prevElements2.slice(0, atIndex), element, ...prevElements2.slice(atIndex)]);
  };

  return (
    <div style={{ display: 'flex' }}>
      <Container elements={elements1} moveElement={moveElement} />
      <Container elements={elements2} moveElement={moveElement} />
    </div>
  );
};

export default App;

Este código utiliza las funciones y del paquete para lograr la funcionalidad de arrastrar y soltar elementos entre divs. Hay dos contenedores que tienen use Draguse Dropreact- dnd Container
dentro de ellos una matriz de elementos, y cada elemento es representado por un componente . El componente utiliza y para definir su comportamiento de arrastrar y soltar. Element Element use Draguse Drop

En el componente , hay dos estados y que almacenan los elementos en cada contenedor. La función se utiliza para mover un elemento de un contenedor a otro.Appelements1elements2moveElement

Espero que esto te ayude a comprender cómo se puede implementar la funcionalidad de arrastrar y soltar elementos en React.

Si no lo entiendes, este código hace una cosa muy interesante. Es como tener dos cajas y cada caja tiene muchas fichas dentro de ellas. Las fichas son nombres como "Element 1", "Element 2", etc.

Y con este código, podemos tomar una de las fichas y arrastrarla de una caja a otra. Así podemos mover las fichas de una caja a otra.

Es como jugar con bloques, pero en lugar de bloques, estamos moviendo nombres de una caja a otra en la computadora.