在 Blazor 拖放中不触发拖放事件

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

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

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

它应该可以正常工作。

在 Blazor 拖放中不触发拖放事件

Drop event not firing in Blazor drag and drop

drag-and-drop

blazor-server-side