BlazorSortableList 1.1.0-alpha.7

Blazor Sortable List

Overview

Fork an implementation of the SortableJS library for Blazor. This example shows you how to reorder elements within a list using drag and drop.

• View Demos .NET7 web assembly
• View Youtube demonstration

Original JS library has more features as implemented now

Great implementation, but I would like to make some changes:

• extract package
• use .NET 8.0 project style for Demo application
• I am thinking of an architecture/usability improvement.

The latest changes will appear first on the development branch.

Compare current implementation with original version:

• View Demos .NET8 server prerendering

Prerequisites

• dotnet 8

Running Locally

1. Clone this repository.
2. Run the project 'BlazorSortableList.DemoApp' using dotnet watch.

How to use it in your own project

1. Install the latest NuGet Package

• Using Package Manager

Install-Package BlazorSortableList

• Using .NET CLI

dotnet add package BlazorSortableList

• Using MS VS Manage NuGet Packages search for BlazorSortableList

2. Add SortableJS to your index.html/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>

3. Add the SortableList.razor.js to your index.html/'app.razor' file..

<script type="module" src="_content/BlazorSortableList/SortableList.razor.js"></script>

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

    <SortableList Id="sortable" Items="items" OnUpdate="@SortList" Context="item">
        <SortableItemTemplate>
            <div>
                <p>@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
   

• 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.

The SortableItemTemplate can contain any markup or components that you want.

Attributes

Properties

All properties are optional and have default values.

Events

OnUpdate (Optional): The method to be called when the list is updated. You can name this method whatever you like, but it expects a oldIndex and newIndex parameters 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 oldIndex and newIndex parameters.

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...

Razor

<SortableList Id="simpleList" Items="items" OnUpdate="@SortList" Context="item">
    <SortableItemTemplate>
        <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
            <p class="is-size-4 p-2 ml-4">@item.Name</p>
        </div>
    </SortableItemTemplate>
</SortableList>

C#

    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();
    }

Enhanced version

From version 1.1 It is possible to use simplified code.

Razor

<SortableList Items="items" Context="item" DefaultSort>
    <SortableItemTemplate>
        <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
            <p class="is-size-4 p-2 ml-4">@item.Name</p>
        </div>
    </SortableItemTemplate>
</SortableList>

No additional C# code required.

History

V1.1 - added DefaultSort parameter V1.0 - orignal component