Sortable List
A drag-and-drop sortable list — reorder items by dragging. Works with any item type via a generic template.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <SortableList />
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
Mobile (rc.49). The drag handle is now a 44×44 px touch target so users can grab and reorder items with a finger without needing to pinch or tap precisely.
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 two-way binding. |
| ItemTemplate | RenderFragment<TItem>? | — | Template for rendering each list item. |
| Handle | bool | true | Show a drag handle icon on the left. When false, the entire card is draggable. |
| Disabled | bool | false | Disable drag-and-drop. |
| Group | string? | — | Group name for cross-list dragging between multiple SortableList instances. |
| Key | Func<TItem, object>? | — | Optional key selector for stable identity tracking across list reorders. Defaults to object identity. |