How to pass DotNetObjectReference to JS DOM-event

I am trying to utilise JS drag & drop in Blazor, which works fine in general but I want to set a custom drag image during the ondragstart event. In general my code looks like this:

<div class="some-draggable-container"
     draggable="true"
     ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)')" >
</div>

Element.dragStartHandler = function(event, imgSrcBase64) {
    var img = new Image();
    img.src = imgSrcBase64;
    event.dataTransfer.setDragImage(img, 0, 0);
}

The problem occurring to me is that I need to call a .Net function after setting the drag image and I cannot find a way to pass the needed DotNetObjectReference through to the JS part.

Simply passing the newly created objectRef into the JS event call leads to an Unexpected end of input error.

ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)', @(DotNetObjectReference.Create(this)))"

Also using the JsonSerializer does not do the trick. It surely does serialise the object and JS is able to deserialise it, but as expected the DotNet.invokeMethod() methods are not present.

ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)', @(JsonSerializer.Serialize(DotNetObjectReference.Create(this))))"

Utilising the Blazor event and handling it fully in .Net does not offer the ability to set the drag image because the passed DragEventArgs are not fully compliant to the JS one.

Passing the event args through IJSRuntime into a JS function leads to errors because it’s just not the same thing as the native JS event, so at least the setDragImage() Method is missing.

Is there any way to make this work? I don’t want to juggle around with JS-to-static-.Net calls and guids or that kind of workaround.