Wouldn't DragEventArgs be a real DragEvent?

[tossnet]

I need to drag and drop a component from one place to another... It doesn't matter where. The idea is that I need to transfer data via DataTransfer.

<element ... @ondragstart="@(e => OnDragStartClick(e))"  />

(...) 

private async Task OnDragStartClick(DragEventArgs e)
{
    (...)
    await _jsRuntime.InvokeVoidAsync("setDragData", e, jsondata);
}

and the part of JS code :

export function setDragData(event, data) {
    if (!event || !event.dataTransfer) {
        console.warn('DragEvent or dataTransfer is null/undefined');
        return;
    }
    try {
        event.dataTransfer.setData('application/json', data);
        event.dataTransfer.effectAllowed = "move";
    }
    catch (error) {
        console.error('Error setting drag data:', error);
    }
}

I sent an SOS to all the AIs, of course, but to no avail. 🛟 but they're going around in circles. I think a human would be better :)

Is this because DragEventArgs does not have setData? Should I then pass dotNetRef to my js?

[engineering87]

Hello @tossnet,
seems you can’t pass Blazor’s DragEventArgs to JS and treat it like a real DOM DragEvent. It’s a .NET wrapper that’s serialized for interop, so event.dataTransfer.setData won’t work. Instead, try passing the element’s ElementReference to JS and attach a dragstart listener there, then call e.dataTransfer.setData() inside that JS handler.