如何将Blazor C#的DragEventArgs传递给接收DragEvent的JS方法

Blazor 的 DragEventArgs 是 C# 端封装的事件数据模型，传递到 JavaScript 时会被序列化为普通 JSON 对象，不包含原生 DragEvent 的 target、dataTransfer 等 DOM 属性，所以 JS 里访问 event.target 会得到 undefined。

方案1：直接用JS绑定拖拽事件（推荐，无需C#中转） #

如果不需要在C#中处理拖拽逻辑，直接在Blazor组件的OnAfterRenderAsync阶段给元素绑定原生JS拖拽事件：

1. Razor代码：

<div @ref="dragElement" draggable="true"> Drag me </div>

@code {
    private ElementReference dragElement;

    [Inject]
    public IJSRuntime JSRuntime { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("setupDragHandler", dragElement);
        }
    }
}

2. JavaScript代码：

function setupDragHandler(element) {
    element.addEventListener('dragstart', function(event) {
        // 修复原代码中未定义的text变量，替换为实际文本
        const dragText = '拖拽中的内容';
        let clonedDragText = event.target.cloneNode(true); 
        clonedDragText.innerText = dragText;
        event.target.after(clonedDragText);
        event.dataTransfer.setDragImage(clonedDragText, 0, 0);
        setTimeout(() => clonedDragText.remove(), 1);
    });
}

方案2：必须经过C#处理时的兼容方式 #

如果需要先在C#中处理拖拽逻辑，再调用JS，可以传递元素引用给JS，结合C#中获取的事件参数补充信息：

1. Razor代码：

<div @ref="dragElement" draggable="true" @ondragstart="HandleDragStart"> Drag me </div>

@code {
    private ElementReference dragElement;

    [Inject]
    public IJSRuntime JSRuntime { get; set; }

    private async Task HandleDragStart(DragEventArgs e)
    {
        // 先执行C端逻辑，比如记录拖拽数据
        Console.WriteLine($"拖拽起点：{e.ClientX}, {e.ClientY}");
        
        // 传递元素引用给JS
        await JSRuntime.InvokeVoidAsync("handleDragFromCSharp", dragElement);
    }
}

2. JavaScript代码：

function handleDragFromCSharp(element) {
    const dragText = '拖拽中的内容';
    let clonedDragText = element.cloneNode(true); 
    clonedDragText.innerText = dragText;
    element.after(clonedDragText);
    // 注意：这种方式无法获取原生dataTransfer，如需设置拖拽图像，优先用方案1
}

• 原JS代码中的text变量未定义，需要替换为实际的拖拽文本内容。
• 原生DragEvent的dataTransfer只能在拖拽事件的回调中直接访问，通过C#中转无法获取该对象。

内容的提问来源于stack exchange，提问作者broJR