时间戳

首页 > 解决方案 > 在 Blazor 拖放中未触发 Drop 事件

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

问题描述

我在使用 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 等）我都尝试过 drop 事件永远不会被触发。

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

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

标签： drag-and-dropblazor-server-side

解决方案

您有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>

它应该可以正常工作。

推荐阅读