drag-and-drop - 在 Blazor 拖放中未触发 Drop 事件

Question

我在使用 Blazor 时遇到了一个奇怪的问题...

我有一个使用拖放功能的应用程序，它使用 .Net Core 3.1 运行良好。然而，无论我做什么，drop 事件现在都不会被解雇，我不知道为什么。因此，我创建了一个新的 Blazor 项目，并将所有内容保留在标准项目模板中，但我已使用以下代码修改了 Index.razor 页面，以查看是否可以找出问题所在:-

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<ul>
    <li draggable="true" @ondragstart="OnDragStart" style="background-color:blue;color:white;width:50px;height:50px;">drag me</li>
</ul>

<div dropzone="move" @ondrop="OnDrop" @ondragover:preventDefault style="background-color:green;color:white;width:200px;height:200px;">
    and drop me here
</div>

<div>@DragState</div>

@code {
    public string DragState = "waiting...";

    public void OnDragStart(DragEventArgs dragEventArgs)
    {
        DragState = "drag started";
    }

    public void OnDrop(DragEventArgs dragEventArgs)
    {
        DragState = "item dropped";
    }
}

据我所知，这应该有效，拖动开始事件工作正常，但任何浏览器(FireFox、Chrome 等...)我尝试放置事件永远不会被触发。

我猜我一定在某个地方做错了什么，但我看不到，所以我希望其他人可以:-)

请注意，我没有更改默认 Blazor 项目中的任何其他文件或设置，只是对 Index.razor 文件进行了此修改以测试拖放...

Answer 1

您有到 preventDefault 的代码为 ondragover事件，但语法错误。将您的放置区更改为

<div dropzone="move" @ondrop="OnDrop" ondragover="event.preventDefault();" style="background-color:green;color:white;width:200px;height:200px;">
    and drop me here
</div>

它应该可以正常工作。