SortableContext para listas reordenáveis

SortableContext é um componente especializado do dnd-kit que envolve uma lista reordenável. Enquanto useDraggable e useDroppable lidam com operações arbitrárias de arrastar e soltar, SortableContext trata especificamente do caso em que os itens de uma lista precisam ser reordenados ao arrastá-los para uma nova posição.

SortableContext exige uma propriedade items: uma matriz de IDs exclusivos, que podem ser strings ou números, correspondentes aos IDs usados nos componentes classificáveis filhos. A ordem dessa matriz define a ordem atual dos itens. Quando você atualiza essa matriz no estado, a lista é renderizada novamente na nova ordem.

SortableContext aceita uma propriedade strategy que controla como os itens são ordenados. verticalListSortingStrategy é usada para listas verticais e calcula o ponto de inserção com base na posição vertical. horizontalListSortingStrategy é usada para listas horizontais. rectSortingStrategy é usada para grades. Escolha a estratégia que corresponde ao seu layout.

Dentro de SortableContext, cada item da lista usa o gancho useSortable({ id }) em vez de useDraggable. useSortable é um superconjunto de useDraggable: ele retorna os mesmos atributos, ouvintes, setNodeRef e transformação, além de valores adicionais específicos da ordenação, como isDragging e overIndex.

O valor isDragging de useSortable é verdadeiro enquanto o item está sendo arrastado ativamente. Normalmente, você o usa para reduzir a opacidade ou adicionar um estilo de espaço reservado ao item original da lista enquanto ele é arrastado. Esse espaço visual mostra ao usuário onde o item está atualmente na lista.

dnd-kit exporta um utilitário arrayMove(array, fromIndex, toIndex) de @dnd-kit/sortable. Ele retorna uma nova matriz com o item de fromIndex movido para toIndex. Essa é a maneira padrão de atualizar a matriz do estado quando uma operação de arrastar para ordenar é concluída.

Na função de retorno onDragEnd do DndContext para uma lista classificável, encontre os índices antigo e novo usando items.indexOf(event.active.id) e items.indexOf(event.over?.id). Se ambos os índices forem válidos e diferentes, chame setItems(arrayMove(items, oldIndex, newIndex)) para reordenar a matriz.

Quando um item é arrastado, os outros itens da lista se animam para novas posições, mostrando onde o item arrastado será colocado. useSortable fornece uma transformação CSS para cada item que não está sendo arrastado, deslocando-o para abrir espaço. Adicionar uma transição CSS a essa transformação cria uma animação de movimento suave.

Aplique uma transição CSS à propriedade de transformação dos itens classificáveis: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. Quando um item está sendo arrastado, não é necessária nenhuma transição (ele deve acompanhar o cursor diretamente). Quando é deslocado, uma transição cria uma animação de deslizamento suave.

Para obter a melhor experiência do usuário, combine SortableContext com DragOverlay. O item arrastado na lista se torna um espaço reservado semitransparente (usando isDragging), enquanto DragOverlay renderiza uma cópia sólida e elevada que acompanha o cursor. Essa abordagem evita falhas visuais em que o item arrastado salta entre posições.

SortableContext funciona igualmente bem para listas verticais (quadros de tarefas, listas de afazeres) e listas horizontais (barras de abas, carrosséis de imagens). Alterne entre as estratégias alterando a propriedade de estratégia. Você pode até usá-lo para um layout de grade com rectSortingStrategy, que calcula a célula de grade mais próxima com base na posição do item arrastado.

Quais argumentos arrayMove recebe quando é chamada dentro de onDragEnd para reordenar uma lista classificável?

SortableContext envolve uma lista reordenável e exige uma matriz de itens com IDs exclusivos e uma estratégia (vertical, horizontal ou de grade). Cada item usa useSortable em vez de useDraggable, obtendo isDragging e overIndex. Em onDragEnd, arrayMove(items, oldIndex, newIndex) reordena a matriz. As transições CSS aplicadas à transformação animam suavemente os itens deslocados.