[FluentSortableList] New component

[vnbaaij]

Fluent Sortable List

An implementation of the SortableJS library for Blazor Fluent UI. Allows for reordering elements within a list using drag and drop. Based on Burke Holland's article and code. re-used with permission.

How to use it in your own project

1. Add SortableJS 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@1.13.0/Sortable.min.js"></script>

1. Use the FluentSortableList.razor in your page/app.

2. Add the SortableList component to your page and define the SortableItemTemplate...

    <FluentSortableList Id="sortable" Items="items" OnUpdate="@SortList" Context="item">
        <ItemTemplate>@item.Name</ItemTemplate>
    </FluentSortableList>
   

• Items: The list of items to be displayed. Can be of any type.
• OnUpdate: The method to be called when the list is updated.
• Context: The name of the variable to be used in the template. (Optional. Use @context. when omitted)

The ItemTemplate can contain any markup or components that you want. Each item is automatically wrapped in a div with class "sortable-item". The following CSS classes can be used to split the drag functionality from the content:

• sortable-grab: the grabable part of the dragable item
• sortable-item-content: the content part of the draggable item

By using these seperate classes, you can define and style areas for grabbing and displaying.. See the examples on how this can be used.

API

Parameters

Only the component's own parameters are described here , not the parameters inherited from base classes

ItemTemplate: RenderFragment<TItem>? (default: null) - The template to be used to define each sortable item in the list. Use the @context parameter to access the item and its properties.

Items: IEnumerable<TItem> (default: null) - The list of items to be displayed in the list.

Group: string (default: null) - Used for dragging between lists. Set the group to the same value on both lists to enable.

Clone: bool (default: false) - Used when you want to clone elments into a list instead of moving them. Set clone to true.

Drop: bool (default: true) - Set to false to disable dropping from another list onto the current list.

Sort: bool (default: true) - Disable sorting within a list by setting to false.

Handle: bool (default: false) - Set to true to use the .sortable-grab CSS class name you set on an element in the ItemTemplate to function as the drag handle. In the default situation the whole item acts as a drragable.

ItemFilter : Func<TItem, bool>? (default: null) - Sepcify a lambda to indicate which item(s) from the Items parameter should be filtered out of the dragging capability

Methods

OnUpdate (Optional): The method to be called when the list is updated. You can name this method whatever you like, but it expects a FluentSortableListEventArgs (containing OldIndex and NewIndex) parameter when the drag and drop occurs.

OnRemove (Optional): The method to be called when an item is removed from a list. This method is useful for handling the drop even between multiple lists. Like OnUpdate, it expects a FluentSortableListEventArgs (containing OldIndex and NewIndex) parameter

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((int oldIndex, int newIndex) indices)
{
    var (oldIndex, newIndex) = indices;

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

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

    StateHasChanged();
}

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1334.westeurope.3.azurestaticapps.net