I have a div that I want to give a custom draggable image (which can be an image or any element):
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage

I have a div I want to drag:

<div class="my-dragging-div"
     draggable="true"
     @ref="@DragElement"
     ondragover="event.preventDefault();"
     @ondragstart="@OnDragStart"
     @ondragend="@OnDragEnd">
</div>

The callback is:

private async Task OnDragStart(DragEventArgs args)
{
    await JSRuntime.InvokeVoidAsync("setDragImage", args, DragElement, 0, 0);
}

This JavaScript function is:

setDragImage(event: DragEvent, element: HTMLElement, xOffset: number = 0, yOffset: number = 0): void {
        event.dataTransfer.setDragImage(element, xOffset, yOffset);
}

When calling the DataTransfer.setDragImage JavaScript function via JSRuntime via a @ondragstart Blazor callback, and passing a reference to the DragEventArgs I get an error: event.dataTransfer.setDragImage is not a function.

Microsoft.JSInterop.JSException: event.dataTransfer.setDragImage is not a function

Apparantly, when the DragEventArgs is serialized / deserialized the function pointers are lost.

Please note that on Windows drag image elements with a width over 300px get a gradient overlay that is quite ugly depending on your underlying div and your personal feelings for aesthetics :-). Thus, for our solution we ended up with a completely custom implementation with a cloned ghost element that is following the mouse position. With a custom javascript event subscription we clear the dragImage:

clearDragImage(event: DragEvent): void {
        const img: HTMLImageElement = new Image();
        img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
        event.dataTransfer.setDragImage(img, 0, 0);
 };

Perhaps this information is useful when working on issue #18754.

Further technical details

• ASP.NET Core version: 5.0.6