DndContext, useDraggable e useDroppable

Todo recurso de arrastar e soltar no dnd-kit deve ser envolvido em um componente DndContext. O DndContext é o núcleo de coordenação: acompanha os arrastos ativos, comunica-se entre elementos arrastáveis e destinos de soltura e dispara callbacks de eventos. Normalmente, você o posiciona no nível do componente que gerencia o estado do arrasto.

O hook useDraggable({ id }) torna um componente arrastável. Ele retorna quatro valores principais: atributos (props ARIA a serem aplicadas ao elemento), ouvintes (manipuladores de eventos para iniciar o arrasto), setNodeRef (anexa a referência do elemento arrastável) e transformação (a translação atual como {x, y, scaleX, scaleY}).

Para configurar um elemento arrastável, aplique attributes e listeners ao elemento e passe setNodeRef como a prop ref. Os atributos incluem role="button", tabIndex e propriedades ARIA. Os ouvintes anexam manipuladores de eventos de ponteiro e teclado necessários para que o dnd-kit detecte o início do arrasto.

O valor transform de useDraggable é null quando não há arrasto e um objeto de coordenadas durante o arrasto. Você o converte em uma cadeia de caracteres CSS usando CSS.Translate.toString(transform) do pacote @dnd-kit/utilities. Aplique esse valor como a propriedade CSS transform no elemento arrastável para que ele acompanhe visualmente o cursor.

O hook useDroppable({ id }) marca um contêiner como um destino de soltura válido. Ele retorna isOver (um valor booleano que é true enquanto um elemento arrastável passa sobre esse destino de soltura) e setNodeRef para anexar a referência ao elemento de destino. Diferentemente de useDraggable, não há ouvintes de eventos a serem aplicados.

O valor isOver de useDroppable permite fornecer feedback visual durante um arrasto. Quando isOver é true, você pode aplicar uma cor de destaque, uma borda ou uma alteração de fundo à zona de soltura. Isso ajuda os usuários a entender onde podem soltar o item, algo essencial para a usabilidade e a acessibilidade.

O callback onDragEnd no DndContext recebe um objeto de evento com duas propriedades importantes: event.active contém o item arrastado (incluindo seu id) e event.over contém o destino de soltura (ou null se o item for solto fora de qualquer destino de soltura). Você usa esses IDs para atualizar o estado da aplicação.

Em onDragEnd, depois de verificar que event.over não é nulo, atualize seu estado para refletir a movimentação. Por exemplo, se estiver movendo um cartão entre colunas em um quadro Kanban, remova o cartão da coluna de origem e adicione-o à coluna de destino identificada por event.over.id.

DragOverlay renderiza uma visualização flutuante do item arrastado que acompanha o cursor. Ele é renderizado como um portal (fora da árvore normal do DOM), portanto nunca é recortado por contêineres com overflow:hidden. Ao contrário do elemento original, a sobreposição pode ter sombras projetadas, transformações de escala ou rotação para indicar que está sendo arrastada.

Para renderizar o conteúdo correto no DragOverlay, acompanhe qual item está sendo arrastado usando a função de retorno onDragStart. Armazene o ID ativo no estado: setActiveDragId(event.active.id). Em onDragEnd, redefina-o como nulo. Dentro de DragOverlay, use activeDragId para localizar o item correto e renderizá-lo.

Uma interface real de arrastar e soltar combina DndContext, vários elementos useDraggable, várias zonas useDroppable e gerenciamento de estado para acompanhar onde cada item está. A ideia principal é que dnd-kit fornece a mecânica — cabe a você atualizar o estado em onDragEnd e renderizar novamente a interface para refletir a nova disposição.

Qual utilitário converte o objeto transform de useDraggable em uma string de transformação CSS?

DndContext é o núcleo de coordenação de todas as operações de arrastar e soltar do dnd-kit. useDraggable fornece atributos, ouvintes, setNodeRef e transformação para elementos arrastáveis. useDroppable fornece isOver e setNodeRef para destinos de soltura. onDragEnd fornece event.active.id e event.over?.id para atualizar o estado. DragOverlay renderiza uma visualização flutuante baseada em portal.