SortableContext para listas reordenables

SortableContext es un componente especializado de dnd-kit que envuelve una lista reordenable. Mientras que useDraggable y useDroppable gestionan operaciones de arrastrar y soltar arbitrarias, SortableContext se ocupa específicamente de los casos en los que es necesario reordenar los elementos de una lista arrastrándolos a una nueva posición.

SortableContext requiere una propiedad items: un array de IDs únicos de tipo string o number que coincidan con los IDs utilizados en los componentes sortables secundarios. El orden de este array define el orden actual de los elementos. Cuando actualiza este array en el estado, la lista vuelve a renderizarse en el nuevo orden.

SortableContext acepta una propiedad strategy que controla cómo se ordenan los elementos. verticalListSortingStrategy se utiliza para listas verticales y calcula el punto de inserción según la posición vertical. horizontalListSortingStrategy se utiliza para listas horizontales. rectSortingStrategy se utiliza para cuadrículas. Elija la estrategia que corresponda a su diseño.

Dentro de SortableContext, cada elemento de la lista utiliza el hook useSortable({ id }) en lugar de useDraggable. useSortable es un superconjunto de useDraggable: devuelve los mismos attributes, listeners, setNodeRef y transform, además de valores específicos de la ordenación, como isDragging y overIndex.

El valor isDragging de useSortable es true mientras el elemento se arrastra activamente. Normalmente se utiliza para reducir la opacidad o añadir un estilo de marcador de posición al elemento original de la lista mientras se arrastra. Este espacio visual muestra al usuario dónde se encuentra actualmente el elemento en la lista.

dnd-kit exporta una utilidad arrayMove(array, fromIndex, toIndex) desde @dnd-kit/sortable. Devuelve un array nuevo con el elemento situado en fromIndex movido a toIndex. Esta es la forma estándar de actualizar el array del estado cuando finaliza un arrastre de ordenación.

En la función de devolución de llamada onDragEnd de DndContext para una lista ordenable, busque los índices antiguo y nuevo mediante items.indexOf(event.active.id) y items.indexOf(event.over?.id). Si ambos índices son válidos y diferentes, llame a setItems(arrayMove(items, oldIndex, newIndex)) para reordenar el array.

Cuando se arrastra un elemento, los demás elementos de la lista se animan hacia nuevas posiciones para mostrar dónde aterrizará el elemento arrastrado. useSortable proporciona una transformación CSS para cada elemento que no se está arrastrando, de modo que se aparta. Añadir una transición CSS a esta transformación crea una animación de movimiento fluida.

Aplique una transición CSS a la propiedad transform de los elementos sortables: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. Cuando se está arrastrando un elemento, no se necesita ninguna transición, ya que debe seguir directamente al cursor. Cuando un elemento se desplaza, la transición crea una animación de deslizamiento fluida.

Para obtener la mejor experiencia de usuario, combine SortableContext con DragOverlay. El elemento arrastrado de la lista se convierte en un marcador de posición semitransparente (mediante isDragging), mientras que DragOverlay renderiza una copia sólida y elevada que sigue al cursor. Este enfoque evita los problemas visuales en los que el elemento arrastrado salta entre posiciones.

SortableContext funciona igualmente bien con listas verticales (tableros de tareas, listas de tareas pendientes) y listas horizontales (barras de pestañas, carruseles de imágenes). Cambie de estrategia modificando la propiedad strategy. Incluso puede utilizarlo con un diseño de cuadrícula mediante rectSortingStrategy, que calcula la celda de cuadrícula más cercana según la posición del arrastre.

¿Qué argumentos recibe arrayMove cuando se llama dentro de onDragEnd para reordenar una lista sortable?

SortableContext envuelve una lista reordenable y requiere un array items de IDs únicos y una estrategia (vertical, horizontal o de cuadrícula). Cada elemento utiliza useSortable en lugar de useDraggable, con lo que obtiene isDragging y overIndex. En onDragEnd, arrayMove(items, oldIndex, newIndex) reordena el array. Las transiciones CSS sobre transform animan suavemente los elementos desplazados.