Sobreposições personalizadas de arraste e DnD entre vários contêineres

DragOverlay renderiza seu conteúdo como um portal do React, adicionando-o diretamente a document.body em vez de colocá-lo dentro da árvore DOM do DndContext. Isso significa que ele nunca é recortado por contêineres com overflow:hidden ou overflow:scroll e sempre aparece acima de todos os outros elementos, sem exigir gerenciamento manual de z-index.

Como DragOverlay é separado do elemento original, ele pode ter estilos visuais que prejudicariam o layout se fossem aplicados ao original. Você pode adicionar uma sombra projetada, uma transformação de escala (deixando-o um pouco maior que o original) ou um efeito de rotação. Essas pistas visuais comunicam ao usuário que o item foi "levantado" e está em movimento.

DragOverlay precisa saber o que renderizar. Acompanhe o ID do arrasto ativo no estado: defina-o em onDragStart com event.active.id e limpe-o em onDragEnd com null. Dentro de DragOverlay, use esse ID para localizar os dados do item correspondente e renderizar o componente de visualização correto.

Ao usar DragOverlay, o item arrastável original deve se tornar um espaço reservado visual durante o arrasto. Ao usar useSortable, aplique opacity: 0 ou uma borda tracejada quando isDragging for verdadeiro. Isso mostra o "espaço" ao qual o item retornará se o arrasto for cancelado e a lacuna que ele deixa ao ser movido para uma nova posição.

Arrastar e soltar em vários contêineres significa que os itens podem ser arrastados entre duas ou mais listas separadas. A configuração exige um único DndContext envolvendo todos os contêineres, com cada contêiner tendo seu próprio SortableContext. Todos os IDs de itens em todos os contêineres devem ser globalmente exclusivos para evitar colisões.

Para obter uma animação suave entre contêineres, atualize o estado em onDragOver em vez de esperar por onDragEnd. Quando o item arrastado entrar em um novo contêiner, mova-o imediatamente do contêiner de origem para o contêiner de destino. Isso fornece feedback visual em tempo real sobre onde o item será colocado.

Ao arrastar entre várias instâncias de SortableContext, todos os IDs de itens devem ser exclusivos em todo o DndContext — não apenas dentro de cada lista. Se dois contêineres compartilharem um ID, dnd-kit não poderá determinar qual item está ativo. Use UUIDs ou prefixe os IDs com o nome do contêiner para garantir a exclusividade global.

useDraggable e useSortable aceitam uma opção data: useSortable({ id, data: { containerId, type } }). Esses dados ficam disponíveis nas funções de retorno dos eventos de arrasto como event.active.data.current. Em cenários com vários contêineres, você pode armazenar o ID do contêiner de origem nos dados e usá-lo em onDragOver para saber de onde o item está vindo.

O estado de vários contêineres normalmente usa um objeto indexado pelo ID do contêiner, em que cada entrada contém uma matriz de itens. Em onDragOver, quando o item ativo estiver em um contêiner diferente daquele do alvo sob o qual ele está, remova o item da matriz do contêiner de origem e insira-o na matriz do contêiner de destino na posição correta.

KeyboardSensor funciona com arrastar e soltar em vários contêineres. Os usuários pressionam as teclas de seta para mover-se entre os itens dentro de um contêiner e, ao chegar à borda de um contêiner, podem continuar para os contêineres adjacentes. O algoritmo collisionDetection de SortableContext determina o destino de soltura válido mais próximo com base na posição.

DndContext aceita uma propriedade collisionDetection que determina como ele calcula sobre qual área de soltura o item arrastado está. O padrão closestCenter funciona bem para a maioria das listas. closestCorners é melhor para grades. pointerWithin só ativa uma área de soltura quando o cursor está fisicamente dentro dela.

Onde DragOverlay renderiza seu conteúdo no DOM?

DragOverlay é renderizado como um portal para document.body, proporcionando independência visual em relação às restrições do layout. Acompanhe activeDragId em onDragStart/onDragEnd para renderizar o conteúdo correto da sobreposição. O arrastar e soltar em vários contêineres usa várias instâncias de SortableContext dentro de um único DndContext, com IDs globalmente exclusivos. Atualize o estado em onDragOver para obter animações suaves entre contêineres, usando event.active.data.current para os metadados do contêiner de origem.