Feature: Drag and Drop

[KristofferStrube]

I have looked at adding support for the Drag and Drop part of the API which is defined like this in the Web IDL specs:

partial interface DataTransferItem {
    Promise<FileSystemHandle?> getAsFileSystemHandle();
};

This means that it is an extension on the existing WebIDL definition of the DataTransferItem.

Blazor has a matching class for the DataTransferItem which can be seen here in the docs

The problem with that class is that it is indeed handled as a POCO when parsed to JS through JSInterop. This means that we will only get the two properties that exist on the object not a posibility to call JS function on the object itself from i.e. the previously described extension.

This has been tested on a feature branch of this project https://github.com/KristofferStrube/Blazor.FileSystemAccess/tree/feature/DragAndDrop

Which currently gives an error when we try to invoke getAsFileSystemHandle() or any other existing DataTransferItem methods.

This is the expected behaviour. What could be nice would be if the DataTransferItem from C# would (or could) be interpreted as the JS reference so that people can call the native browser methods on the object.

It is planned to open an issue on the aspnetcore repository once I have collected more information about how the DataTransferItem is currently handled in the project and when I have found some approach that would make this possible without bloating the existing object.

[KristofferStrube]

I recently made some posts on my social media about the future plans for this project. I'm re-stating parts of that here now:

It (Drag and Drop support to this library) is not easy to add as Blazor's implementation of DataTransferItems is not exposing the needed IJSObjectReference to the underlying object since it is just a POCO. I was contemplating making an issue for adding this to Blazor, but now I don't think it belongs there.
The File System Access API adds an extension to DataTransferItem called getAsFileSystemHandle which I would like to wrap in Blazor. So to do so I first need a more featureful and extendable implementation of DataTransferItem. DataTransferItem is a part of the Drag and Drop section of the HTML specs. https://html.spec.whatwg.org/multipage/dnd.html#dnd
So I will make a wrapper of this part of the HTML API and expose it as DnDOnDragStart using the new custom events from .NET 6. I'm not 100% settled on the name yet.
The Drag and Drop API also introduces an event called DragEvent. It would be very nice if we could use the methods available to all events like preventDefault and stopPropagation on this event and the same is true for other events in my Blazor wrappers.
So I plan to make a separate wrapper for the Events part of the DOM Standard API as well. This will also be used in my Blazor File API, File System Access API, and Device Orientation wrappers to give more control to events used in them.