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.Design mockups
Write tests
Deploy app
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.☰
Item 1
☰
Item 2
☰
Item 3
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.Card A
Description A
Card B
Description B
Card C
Description C
Card D
Description D
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.To Do
Task 1
Task 2
Task 3
Done
Task 4