Sortable

A headless drag-and-drop sortable primitive powered by SortableJS. Handles all JS interop lifecycle, ARIA live announcements, key-based Blazor diffing, and IAsyncDisposable cleanup. Ships no CSS -- use the styled BbSortable component for pre-built layouts, or build your own presentation on top.

Basic List

A basic sortable list using the primitive. Drag items to reorder. No layout styles are applied -- you provide all styling through your ItemTemplate.

Task 1

Task 2

Task 3

Drag Handle

Use the Handle parameter with a CSS selector to restrict dragging to a specific element within each item. This allows other content in the item to remain interactive.

☰ Item A

☰ Item B

☰ Item C

Connected Lists

Use the same Group name on multiple BbSortable instances to enable transferring items between lists. Items can be reordered within each list and dragged across lists.

List A

Alpha

Beta

Gamma

List B

Delta

Epsilon

Clone Mode

Set Pull="clone" to copy items from a source list instead of moving them. Combine with Put="false" and Sort="false" to create a read-only template palette that feeds into a target list.

Templates (drag to copy)

Template A

Template B

Target

Anatomy

<BbSortable Items="items" Context="item">    @* Root sortable container *@
    <ItemTemplate>                           @* Template for each item *@
        <div>@item</div>                     @* Your custom item markup *@
    </ItemTemplate>
</BbSortable>

Key Behaviors

Items are wrapped with @key for stable Blazor diffing during reorder
ARIA live region announces drag operations for assistive technologies
JS interop uses freezeSnapshot pattern (static overlay clone) to prevent visible flash during Blazor re-render
Move events are debounced (200ms) to prevent grid oscillation
Implements IAsyncDisposable for proper JS cleanup

View source on GitHub

Previous Slider Next Switch

Sortable

Examples