Blazor Reorder

Live Examples

https://elgransan.github.io/BlazorReorder

Intro

A Drag and Drop sortable list built in Blazor. It only uses javascript for trigger events and get element information (that in NET 6 it's impossible to do it directly from Blazor)

The Reorder Component is a RCL so you can install it as nuget package or you can reference the source code project

Example code:

Program.cs

// Add this lines
builder.Services.AddScoped<BlazorReorderList.ReorderService<ListItem>>();
public record ListItem(string title, string url, string details);

Example.razor

@page "/example"
<div class="card">
    <Reorder Items="list" TItem="ListItem">
        <div class="mb-2 mx-2">
            <h5>@context.title</h5>
            <p>@context.details <a href="@context.url">Go</a></p>      
        </div>
    </Reorder>
</div>

@code
{
    public List<ListItem> list = new()
    {
        new ListItem("Google", "https://google.com", "Again looking for a bug ..."),
        new ListItem("StackOverflow", "https://stackoverflow.com", "Could be this the solution?"),
        new ListItem("GitHub", "https://github.com", "Let's steal awesome code"),
        new ListItem("Twitter", "https://twitter.com", "What a genious am I"),
        new ListItem("Another", "https://another.com", "The solution must be somewhere!!!")
    };
}

Basic example:

Drag between lists:

Roadmap

• Basic funtionality
• Component RCL
• Easy Restyling
• Touch Events Mobile experience
• Drag & Drop between lists
• Copy between lists
• Callback functionality (OnStart, OnChange, OnFinish)
• Properties: Disabled, DisableDrop, DisableDrag
• Drag handler
• Page service (insted scoped)
• Create Public Nuget Package
• Code cleanup
• Nested lists
• Documentation