Can you please write me small code snippet for React functional component, that has two divs and each div have multiple items inside of them, source of items is an Array, also each item should be drag & drop between two divs ?
user
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.
assistant