Blazor-BlazorReorder
[删除(380066935@qq.com或微信通知)]
elgransan/BlazorReorder: Blazor Drag and Drop Reorder List Component (github.com)
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: