I am learning Blazor having come from a WinForm UWP background. I have a list of Game:
public class Game{ public string ID { get; set; } public string Text { get; set; } public override string ToString() { return Text; }}List<Game> Games = new List<Game> {new Game() { ID= "Game1", Text= "American Football"},new Game() { ID= "Game2", Text= "Badminton" },new Game() { ID= "Game3", Text= "Basketball" },new Game() { ID= "Game4", Text= "Cricket"},new Game() { ID= "Game5", Text= "Football" },new Game() { ID= "Game6", Text= "Golf" },new Game() { ID= "Game7", Text= "Hockey" },new Game() { ID= "Game8", Text= "Rugby" },new Game() { ID= "Game9", Text= "Snooker" },new Game() { ID= "Game10", Text= "Tennis" },};I want to drag and drop to reorder my list. Here is my Element.
<ul ondragover="event.preventDefault();" style="margin:20px">@foreach (var item in Games){<li draggable="true" style="list-style-type:none; height:30px" @key="item" tabindex="1" @onclick="@(()=> ClickItem(item))" @ondrop="@(()=> Drop(item))"><span>@item.Text</span></li>}I select an item in the list with the @onclick:
Game currentGame;int currentIndex;void ClickItem(Game item){ currentIndex = Games.FindIndex(a => a.Text == item.Text); currentGame = item;}And I handle the ondrop with:
void Drop(Game item){ var newIndex = Games.FindIndex(a => a.Text == item.Text); Games.Insert(newIndex, currentGame); Games.RemoveAt(currentIndex); StateHasChanged();}Nothing happens in the Drop method the list does not change and the app breaks but throws no error and navigation stops.All the events are firing. Can't find any examples of S.O. to help.