在 Blazor 拖放中未触发 Drop 事件答案

【问题标题】：Drop event not firing in Blazor drag and drop在 Blazor 拖放中未触发 Drop 事件
【发布时间】：2019-12-21 15:09:45
【问题描述】：

我在使用 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 文件进行了此修改以测试拖放...

【问题讨论】：

标签： drag-and-drop blazor-server-side

【解决方案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 @ondragover:preventDefault 没有做同样的事情？