"Not a function" when calling setDragImage with Drag & Drop

[rogihee]

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:

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

[javiercn]

@rogihee thanks for contacting us.

DragEventArgs is not a 1:1 map with the argument from the event. In other words, the event is being copied to .NET and copied back to JS and the object you are receiving in the function is not the same the event is raising.

I would suggest using one of the available drag and drop implementations by the community.

[rogihee]

This is not covered by one of the community implementations AFAIK such as https://github.com/Postlagerkarte/blazor-dragdrop.

Please note that I see this as an issue rather than a question, I now have to have a double implementation for the Blazor @ondragstart and my custom event subscription in OnAfterRender. It would be nice if Blazor would solve this a better way.

[javiercn]

@rogihee we have a work item for supporting drag and drop already here

In addition to that, you can potentially solve this with custom events. See more here

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.