Blazor 拖放功能中 Drop 事件未触发

Question

我遇到了一个有关Blazor的奇怪问题...

我曾经使用.NET Core 3.1编写一个应用程序，在此应用程序中，我使用了拖放功能，并且它可以正常工作。但是，现在无论我做什么，都无法触发拖放事件，我不知道为什么。因此，我创建了一个新的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文件以测试拖放...

- rocket porg

Answer 1

您有代码来防止ondragover事件的默认行为，但语法是错误的。将您的拖放区域更改为：

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

它应该能正常工作。

- Piotr L

---

好的，问题解决了。不过很奇怪，Blazor中的@ondragover:preventDefault为什么不起作用呢？ - rocket porg