Blazor 通过拖放重新排序列表

Question

我正在学习来自 WinForm UWP 背景的 Blazor。我有一个游戏列表:

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" },

};
我想拖放以重新排序我的列表。这是我的元素。

<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>
}

我使用@onclick 在列表中选择一个项目:

Game currentGame;
int currentIndex;
void ClickItem(Game item)
{
    currentIndex = Games.FindIndex(a => a.Text == item.Text);
    currentGame = item;
}

我处理ondrop:

    void Drop(Game item)
{
    var newIndex = Games.FindIndex(a => a.Text == item.Text);
    Games.Insert(newIndex, currentGame);
    Games.RemoveAt(currentIndex);
    StateHasChanged();
}

Drop 方法中没有任何事情发生，列表不会更改，应用程序中断但不会引发错误并且导航停止。所有事件都在触发。找不到任何 S.O. 的例子。帮助。

Answer 1

我设法在 BlazorFiddle 中为您创建了一个工作示例:

https://blazorfiddle.com/s/8jurefka

根据 Henk 的建议，我更换了您的 ClickItem与 StartDrag处理 @ondrag 的方法事件。如果您使用 @onclick您必须先单击一个项目，然后才能拖动它。使用 @ondrag事件你可以避免这种情况。我认为这可能是某些情况下出现问题的原因。

我还添加了一些调试助手，以便我可以看到发生了什么。