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.
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence