Blazor Blueprint Blazor Blueprint
Previous Slider Next Swipe Area

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.
Loading example…

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.
Loading example…

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.
Loading example…

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.
Loading example…

Anatomy

Loading example…

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 Swipe Area