69 lines
2.2 KiB
Markdown
69 lines
2.2 KiB
Markdown
# Blazor Reorder
|
|
|
|
### Disclaimer
|
|
This component is in development, still can suffer big modifications that can affect functionality
|
|
|
|
### 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
|
|
|
|
- [x] Basic funtionality
|
|
- [x] Component RCL
|
|
- [x] Easy Restyling
|
|
- [x] Touch Events Mobile experience
|
|
- [x] Drag & Drop between lists
|
|
- [X] Copy between lists
|
|
- [X] Callback functionality (OnStart, OnChange, OnFinish)
|
|
- [x] Properties: Disabled, DisableDrop, DisableDrag
|
|
- [x] Drag handler
|
|
- [x] Page service (insted scoped)
|
|
- [ ] Documentation
|
|
- [ ] Create Public Nuget Package
|
|
- [ ] Code cleanup
|