Sortable
Drag-to-reorder list with keyboard support and animation. Persistable via two-way bound Items.
When to Use
- Reorderable lists where users need to prioritize or rank items.
- Playlist or queue management with drag-and-drop ordering.
- Form field ordering in builder or configuration interfaces.
- Any list where the sequence matters and users should control the order.
Design mockups
Write tests
Review PR
Deploy to staging
Update docs
Item Alpha
Item Beta
Item Gamma
Item Delta
Fix login bug
Alice
High
Build dashboard
Bob
Medium
Write API docs
Carol
Low
Performance audit
Dave
High
Cannot drag this
Or this one
Locked order
API Reference
SortableList<TItem>
| Property | Type | Default | Description |
|---|---|---|---|
| Items | List<TItem> | [] | The list of items to display and reorder. |
| ItemsChanged | EventCallback<List<TItem>> | — | Fired with the new order after a drop. Use with @bind-Items for two-way binding. |
| ItemTemplate | RenderFragment<TItem>? | — | Template for rendering each list item. Receives the item via the Context attribute. |
| Handle | bool | true | Show a grip-vertical handle icon. When false, the whole card is the drag target. |
| Disabled | bool | false | Disables all drag interactions and hides the handle icon. |
| Group | string? | — | Group name — items can be dragged between multiple SortableList instances that share the same group. |
| Class | string? | — | Additional CSS classes merged onto the root container. |