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;
bool FirstRun = true;
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 async override Task OnAfterRenderAsync()
{
if (FirstRun)
{
MyGroup.Sortable.SetData(items);
await MyGroup.Sortable.Create(MyGroup.Id, new SortableJsOptions
{
group = "test",
animation = 100,
});
FirstRun = false;
StateHasChanged();
}
}
}