useSortable
hook within it.items
prop passed to SortableContext
be sorted in the same order in which the items are rendered, otherwise you may see unexpected results.SortableContext
component also accepts different sorting strategies to compute transforms for the useSortable
hook. The built in strategies include:rectSortingStrategy
: This is the default value, and is suitable for most use cases. This strategy does not support virtualized lists.verticalListSortingStrategy
: This strategy is optimized for vertical lists, and supports virtualized lists.horizontalListSortingStrategy
: This strategy is optimized for horizontal lists, and supports virtualized lists.rectSwappingStrategy
: Use this strategy to achieve swappable functionality.SortableContext
component also optionally accepts an id
prop. If an id
is not provided, one will be auto-generated for you. The id
prop is for advanced use cases. If you're building custom sensors, you'll have access to each sortable element's data
prop, which will contain the containerId
associated to that sortable context.SortableContext
component to function properly, make sure it is a descendant of a DndContext
provider. SortableContext
providers within the same parent DndContext
provider.SortableContext
providers within other SortableContext
providers, either all under the same DndContext
provider or each with their own individual DndContext
providers if you would like to configure them with different options: