BlazorSortableJS is a Blazor Wrapper over JavaScript Sortable lib.
Sortable is a JavaScript library for reorderable drag-and-drop lists.
This is a very early project. However, it does function and is very much usable. The user experience will get better over.
- _host.cshtml
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="_content/BlazorSortableJs/js/BlazorSortableJs.js"></script>- Usage
Sortable List
<SortableGroup Class="list-group" TItem="string" @ref="MyGroup">
@foreach (var item in @MyGroup.Sortable.GetRaw())
{
<SortableItem Class="list-group-item" Item="item" TItem="string">@item.Data</SortableItem>
}
</SortableGroup>@code
{
SortableGroup<string> MyGroup;
List<string> items { get; set; } = new List<string> { "T1", "T2", "T3" };
List<string> resultsList { get; set; } = new List<string>();
protected override Task OnInitializedAsync()
{
resultsList = items;
return base.OnInitializedAsync();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
MyGroup.Sortable.SetData(items);
await MyGroup.Sortable.CreateAsync(MyGroup.Id, new SortableJsOptions
{
Group = "test",
Animation = 100,
});
StateHasChanged();
}
}
}