Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Sortable
A styled drag-and-drop sortable component built on the BbSortable primitive. Adds a SortableLayout enum (List/Grid) with pre-built Tailwind CSS layout classes. Powered by SortableJS with full JS interop lifecycle management, ARIA live announcements, key-based Blazor diffing, and IAsyncDisposable cleanup.
Default
A basic sortable list. Drag items to reorder them. The component uses
IList<TItem> for the Items parameter and ItemTemplate for rendering each item.
Loading example…
Drag Handle
Use the
Handle parameter with a CSS selector to restrict dragging to a specific element. Only the handle element will initiate a drag, allowing other content in the item to remain interactive.
Loading example…
Grid Layout
Set
Layout to SortableLayout.Grid to arrange items in a two-column grid. Override the column count using Class="grid-cols-3" or any Tailwind grid column utility.
Loading example…
Connected Lists
Use the same
Group name on multiple BbSortable instances to enable dragging items between lists. Items can be reordered within each list and transferred across lists.
Loading example…