Superposiciones de arrastre personalizadas y DnD entre contenedores

DragOverlay renderiza su contenido como un portal de React y lo añade directamente a document.body, en lugar de hacerlo dentro del árbol DOM de DndContext. Esto significa que nunca queda recortado por contenedores con overflow:hidden u overflow:scroll y que siempre aparece por encima de los demás elementos sin necesidad de gestionar manualmente z-index.

Como DragOverlay está separado del elemento original, puede tener estilos visuales que alterarían el diseño si se aplicaran al elemento original. Puede añadir una sombra, una transformación de escala (hacerlo ligeramente más grande que el original) o un efecto de rotación. Estas señales visuales comunican al usuario que el elemento está "elevado" y en movimiento.

DragOverlay necesita saber qué debe renderizar. Realice un seguimiento del ID del arrastre activo en el estado: establézcalo en onDragStart con event.active.id y elimínelo en onDragEnd con null. Dentro de DragOverlay, use ese ID para buscar los datos del elemento correspondiente y renderizar el componente de vista previa correcto.

Al utilizar DragOverlay, el elemento arrastrable original debe convertirse en un marcador de posición visual durante el arrastre. Si utiliza useSortable, aplique opacity: 0 o un borde discontinuo cuando isDragging sea true. Esto muestra el "espacio" al que volvería el elemento si se cancelara el arrastre y el hueco que deja al moverse a una nueva posición.

Arrastrar y soltar entre varios contenedores significa que los elementos pueden arrastrarse entre dos o más listas independientes. La configuración requiere un único DndContext que envuelva todos los contenedores, y cada contenedor debe tener su propio SortableContext. Todos los IDs de los elementos de todos los contenedores deben ser únicos globalmente para evitar colisiones.

Para obtener una animación fluida entre contenedores, actualice el estado en onDragOver en lugar de esperar a onDragEnd. Cuando el elemento arrastrado entra en un contenedor nuevo, muévalo inmediatamente del contenedor de origen al contenedor de destino. Esto proporciona información visual en tiempo real sobre dónde aterrizará el elemento.

Al arrastrar entre varias instancias de SortableContext, todos los IDs de los elementos deben ser únicos en todo DndContext, no solo dentro de cada lista. Si dos contenedores comparten un ID, dnd-kit no puede determinar qué elemento está activo. Utilice UUID o añada como prefijo el nombre del contenedor a los IDs para garantizar su unicidad global.

useDraggable y useSortable aceptan una opción data: useSortable({ id, data: { containerId, type } }). Estos datos están disponibles en las funciones de devolución de llamada de los eventos de arrastre como event.active.data.current. En escenarios con varios contenedores, puede almacenar el ID del contenedor de origen en data y utilizarlo en onDragOver para saber de dónde procede el elemento.

El estado de varios contenedores suele utilizar un objeto cuyas claves son los IDs de los contenedores y cuyo valor para cada clave es un array de elementos. En onDragOver, cuando el elemento activo está en un contenedor diferente del destino sobre el que se encuentra, elimine el elemento del array del contenedor de origen e insértelo en el array del contenedor de destino en la posición correcta.

KeyboardSensor funciona con DnD entre varios contenedores. Los usuarios pulsan las teclas de flecha para moverse entre los elementos de un contenedor y, cuando llegan al borde de un contenedor, pueden continuar hacia los contenedores adyacentes. El algoritmo collisionDetection de SortableContext determina el destino válido más cercano según la posición.

DndContext acepta una propiedad collisionDetection que determina cómo calcula sobre qué elemento droppable se encuentra el elemento arrastrado. La opción predeterminada closestCenter funciona bien para la mayoría de las listas. closestCorners es mejor para las cuadrículas. pointerWithin solo activa un elemento droppable cuando el cursor está físicamente dentro de él.

¿Dónde renderiza DragOverlay su contenido en el DOM?

DragOverlay se renderiza como un portal en document.body, lo que proporciona independencia visual respecto a las restricciones del diseño. Realice un seguimiento de activeDragId en onDragStart/onDragEnd para renderizar el contenido correcto del overlay. El DnD entre varios contenedores utiliza varias instancias de SortableContext dentro de un único DndContext, con IDs únicos globalmente. Actualice el estado en onDragOver para obtener animaciones fluidas entre contenedores, utilizando event.active.data.current para los metadatos del contenedor de origen.