Estoy escribiendo una aplicación similar a Trello para la gestión de proyectos. Quiero implementar la funcionalidad de arrastrar y soltar desde cero. (Sé que ya hay otras bibliotecas creadas para esto, pero quiero personalizar el comportamiento)

Mis componentes simplificados se ven así:

 import React, { useState } from "react"; const ListsContainer = () => { const [data, setData] = useState([]); //fetch data and do stuff on it return ( <div className="lists-container"> {data.forEach((element) => { return <List element={element}/>; })} </div> ); }; export default ListsContainer;

 import React from "react"; const List = ({ element }) => { //display stuff about the list return <div className="list"></div>; }; export default List;

Lo que quiero hacer es poder hacer clic en una List , arrastrarla dentro del ListContainer y soltarla en lugar de otra. El problema es que no estoy seguro de dónde debo escribir la lógica para esta funcionalidad. Ahora mismo veo 2 posibilidades:

1. Tenga la lógica en el componente ListContainer . El componente List se envolvería usando React.forwardRef() y el contenedor tendría las referencias a todos los componentes List . Esto tiene sentido porque los datos son parte de este componente y se necesita <div className = "lists-container"></div> para calcular si dejé una List en un lugar diferente y el orden entre ellos debe cambiar .
2. Tener la lógica en el componente List . Esto se siente más natural. La funcionalidad de "arrastrar y soltar" es específica de la List y parece que este es el lugar donde debe permanecer la lógica. El problema aquí sería el hecho de que tengo que pasar los datos, así como una referencia a <div className = "lists-container"></div> desde ListContainer hasta cada List para determinar desde dentro de la propia List si o no lo dejé caer en lugar de otro.

También es muy probable que haya una tercera opción para hacer una combinación de estos dos, pero no estoy 100% seguro de cómo hacerlo.

Entonces, ¿cuál crees que es el mejor enfoque?