Drop event not firing in Blazor drag and drop - drag-and-drop

Question

I'm having a strange problem with Blazor...
I had an application where I was using drag and drop and it was working fine using .Net Core 3.1. However the drop event is now not getting fired no matter what I do and I'm at a loss as to why. So I've created a new Blazor project and kept everything as it is in the standard project template, but I've modified the Index.razor page with the following code to see if I can find out what's going wrong:-
#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";
}
}
As far as I can see this should work, the drag start event works fine but any browser (FireFox, Chrome etc...) I try the drop event never gets fired.
I'm guessing I must be doing something glaringly wrong somewhere but I cannot see it, so I'm hoping someone else can :-)
Note, I've not changed any other file or setting in the default Blazor project, just this modification to the Index.razor file to test the drag and drop...

Answer 1

You have code to preventDefault for ondragover event but the syntax is wrong. Change your dropzone to
<div dropzone="move" #ondrop="OnDrop" ondragover="event.preventDefault();" style="background-color:green;color:white;width:200px;height:200px;">
and drop me here
</div>
and it should work fine.