CODEWITHSUNDEEP
drag-and-dropblazor-server-side
rocket porg
rocket porg

Reputation: 204

Drop event not firing in Blazor drag and drop

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...

Upvotes: 6

Views: 4230

Answers (1)

Piotr L
Piotr L

Reputation: 989

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.

Upvotes: 10

Related Questions