Skip to content

Conversation

@vnbaaij
Copy link
Collaborator

@vnbaaij vnbaaij commented Jan 27, 2026

This pull request introduces a new FluentSortableList component for Blazor Fluent UI, providing a drag-and-drop sortable list powered by SortableJS. The update includes the component implementation, JavaScript interop, documentation, and a comprehensive set of usage examples demonstrating sorting, moving, cloning, filtering, disabling, drag handles, and fallback behaviors.

The most important changes are:

Component Implementation and Integration

  • Added the generic FluentSortableList Blazor component, which renders a sortable list using a provided ItemTemplate and exposes event hooks for sorting and moving items. (FluentSortableList.razor)
  • Introduced JavaScript interop with SortableJS to handle drag-and-drop operations, group management, filtering, cloning, drag handles, and fallback mode, and to synchronize DOM changes with Blazor state. (FluentSortableList.ts)
  • Declared sortablejs as a new dependency in the project. (package.json)

Documentation

  • Added thorough documentation for the new component, including usage instructions, integration steps, and detailed explanations of all parameters and events. (FluentSortableList.md)

Examples and Demos

  • Added multiple example .razor files showcasing different use cases:
    • Basic sortable list
    • Moving items between lists
    • Cloning items across lists
    • Disabling sorting and restricting drop targets
    • Drag handles for item reordering
    • Filtering draggable items
    • Fallback (non-HTML5) drag-and-drop mode

Minor Improvements

  • Added a pragma to suppress an analyzer warning in the data grid component to allow synchronous disposal. (FluentDataGrid.razor.cs)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants