Call out JS interop and HTML5 specs for Blazor drag-'n-drop

[Jarek300]

Could you provide working example of using drag events i.e. ondragstart, ondragover and ondrop? Example should show how to put data into DataTransfer and DataTransferItem objects and how data is received in ondrop.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: aa724f22-3a49-c7f6-1500-ac2d8dde5894
• Version Independent ID: 5e8ef502-ccf9-659d-f25a-0f8f3c75f6e0
• Content: ASP.NET Core Blazor event handling
• Content Source: aspnetcore/blazor/components/event-handling.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Hello @Jarek300 ... I'll put it up for potential work; but given the great demands for high priority (new feature) coverage, it will take some time to get to this. We're all 🏃😅 like crazy on .NET 5 basic feature coverage for the .NET 5 release coming up end of year ... and then the holidays 🎁 are going to hit with big vacations 🏖️ (including mine! Woot! 😁). There are also prior commitments to backlogged issues that should be addressed on the topics and sample apps. I'll schedule this, but I'm just letting you know that it will take into Q1 of next year to get to it.

I recommend in the meantime that you consult with the community on it if you're looking for tips ... blog posts ... assistance if you're having trouble. We recommend the usual support channels, which you're probably already familiar with ...

• Stack Overflow
• ASP.NET Core Slack
• ASP.NET Gitter

I'll get to this and see what we can provide as soon as I can. 🏃🏃🏃🏃🏃

[Jarek300]

I've already searched many channels but it seems that nobody have managed to use fully blazor drag events. I hope that is is beceause of lack of documentation not because that events don't work at all.

For example, this post https://chrissainty.com/investigating-drag-and-drop-with-blazor/ by Chris Sainty don't use blazor ondragstart event but JavaScript DOM ondragstart event. Others use blazor drag events only to init or end drag operation but data from the source to the target is transfered using some globla/session store not DataTransfer object.

[guardrex]

I understand your pain on this, but my hands are tied at the moment in terms of looking at this right now. All of my effort at this time is directed to the .NET 5 updates in order to make sure that we have docs for basic features at 5.0's release, which is rapidly approaching ⏰. I haven't worked with drag events in Blazor, so I can't rattle off anything helpful or show something from a test sample. I would need to dedicate time to research, experiment, and reply, and I just don't have any time at the moment.

I recommend hitting up the Blazor devs on the Slack and Gitter chats that I linked. I'm confident that some of those devs have worked with drag events. I'll make sure that we get to this issue asap.

[guardrex]

There's a tidbit in the engineering basic test app. See if it provides a hint ...

https://github.com/dotnet/aspnetcore/blob/master/src/Components/test/testassets/BasicTestApp/MouseEventComponent.razor#L22

[Jarek300]

Unfortunately not. It is a basic test of receiving mouse events. Implementation of OnDragStart event handling:

void OnDragStart(DragEventArgs e)
{
    DumpEvent(e);
    message += "ondragstart,";
    StateHasChanged();
}

doesn’t even touch a property 'e. DataTransfer'.

I'm going to wait till November and see if creating documantation of using drag-and-drop in Blazor is then possible.

[guardrex]

I'm waiting on some reviews, so I had time to search and see what devs are doing ... like this for example by @chrissainty ...

https://chrissainty.com/investigating-drag-and-drop-with-blazor/

Thank you, Chris, that's an excellent read ... the best really that I see.

This was a great start to my investigation, however, it was short lived. After a quick bit of experimenting, it seems at this point in time there isn't a way to populate these values and pass data around using them. At least from C#, which is my goal at the moment. What is available though are the various events of the drag and drop API, I just needed to come up with a way of tracking the data as it moved about.

<ul class="dropzone @dropClass" 
        ondragover="event.preventDefault();"
        ondragstart="event.dataTransfer.setData('', event.target.id);"

eeeeeee yuck! 😖 lol ... not C# ... not very Blazor-y-ish™️ 😄

... so I went and looked to see feedback to the product unit and planning, and there are several issues. Chris also remarks on one or more engineering issues on this subject. Here are the ones that popped up on my search ...

• Blazor - ondrop event doesn't return file object aspnetcore#25721
• Detect drag-and-drop cancellation when user pressed the Escape key aspnetcore#21908
• In Blazor ! How do we perform (Drag & Drop) & (Resizing) in Server-side application. aspnetcore#14132
• Need examples showing Blazor Drag and Drop API aspnetcore#15670
• Setting and clearing data for DragDrop operations aspnetcore#5532
• Blazor DataTransfer wrapper object  aspnetcore#14792

This one is the best and most recent for the planning ...

dotnet/aspnetcore#18754

... and there's a cross-linked planning discussion doc by Mackinnon Buck ...

https://gist.github.com/MackinnonBuck/374e529e9c3fdb9d228214b4cc79e617

... but it's going to be for post-5.0 GA (cut here on the engineering tracking issue) ... so next year perhaps.

When you go the JS interop route with something like this, you're obviously just using the Drag and Drop API ... thus using any of a thousand posts out there on how HTML5 drag and drop works ... tutorials/examples ... gotchas/special use case articles ... etc.

This subject won't be actionable as an example for our docs on that basis. However, the topic should call this out. It should state that JS interop is the right direction for most use cases and link to the Blazor JS interop topic and MDN doc. The dev can then search out examples on the Net from there. I'm going to go ahead and work this on that basis.