SortableList

A SortableJS library adaptation for Blazor Fluent UI. Allows for reordering elements within a list using drag and drop. Inspired by and based on Burke Holland's article and code. Re-used with permission.

The FluentSortableList is a generic component that takes a list of items and a ItemTemplate that defines how to render each item in the sortable list.

How to use this in your own project

If you want to use the FluentSortableList component, you will need to include the script to your index.html/_Layout.cshtml/App.razor file. You can either download from the SortableJS website or use a CDN:

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

We do not include the needed Sortable script in the library.

See the examples below what is needed to use the component in a page.

The component does not actually do any sorting or moving of items. It simply provides the hooks to do so. You will need to handle all events yourself. If you don't handle any events, no sort or move will happen as Blazor needs to make the changes to the underlying data structures so it can re-render the list.

Here is an example of how to reorder your list when the OnUpdate is fired...

private void SortList(FluentSortableListEventArgs args)
{
     if (args is null || args.OldIndex == args.NewIndex)
     {
         return;
     }

     var oldIndex = args.OldIndex;
     var newIndex = args.NewIndex;

     var items = this.items;
     var itemToMove = items[oldIndex];
     items.RemoveAt(oldIndex);

     if (newIndex < items.Count)
     {
         items.Insert(newIndex, itemToMove);
     }
     else
     {
         items.Add(itemToMove);
     }
}

Examples

Simple sortable list

Move items between two lists

Clone items

Disabling sorting

Drag Handles

Filtering

Sortable list using fallback behavior

Documentation