.NET MAUI Blazor Hybrid拖拽失效：WebView2还是互操作问题？

核心问题根源 #

Windows平台的WebView2控件默认会拦截页面内的拖放事件，再加上Blazor Hybrid与WebAssembly的事件传递机制存在差异，最终导致dragover、drop事件无法正常触发到Razor组件，仅dragstart能生效。

1. WebView2是否未正确处理拖放事件？ #

是的。WebView2为避免和系统级拖放操作冲突，默认会阻止页面内的拖放行为。即便页面JS中定义了相关事件，WebView2的原生层会优先拦截，导致Blazor无法接收到后续事件。

2. blazor.webview.js是否拦截了事件？ #

blazor.webview.js主要是适配WebView环境的事件转发逻辑，并非直接拦截拖放事件。问题核心还是WebView2的原生拦截机制，而非JS层的传递故障。

3. 无需完整JS互操作的解决方法？ #

有，分两步处理：

步骤1：配置WebView2允许拖放

在Windows项目的Platforms/Windows/App.xaml.cs中，找到OnLaunched方法，添加WebView2的拖放启用逻辑：

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    base.OnLaunched(args);

    var window = Application.Current.Windows.FirstOrDefault() as MauiWinUIWindow;
    if (window?.Content is Microsoft.UI.Xaml.Controls.Page page)
    {
        var webView = page.FindByName<Microsoft.UI.Xaml.Controls.WebView2>("blazorWebView");
        if (webView != null)
        {
            webView.AllowDrop = true;
            webView.DragOver += (s, e) =>
            {
                e.AcceptedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.Copy;
                e.DragUIOverride.IsGlyphVisible = true;
                e.Handled = false; // 让事件继续传递到Blazor组件
            };
        }
    }
}

步骤2：在Razor组件中正确处理事件

确保拖放目标元素的dragover事件调用preventDefault()，否则浏览器默认会阻止drop事件触发：

<div 
    @ondragstart="HandleDragStart"
    draggable="true"
    style="padding:20px; background:lightblue; margin:10px;">
    可拖拽元素
</div>

<div 
    @ondragover="HandleDragOver"
    @ondrop="HandleDrop"
    style="padding:40px; background:lightgray; margin:10px;">
    拖放目标
</div>

@code {
    private void HandleDragStart(DragEventArgs e)
    {
        e.DataTransfer.SetData("text/plain", "拖拽测试内容");
        Console.WriteLine("dragstart触发");
    }

    private void HandleDragOver(DragEventArgs e)
    {
        e.PreventDefault(); // 必须调用，否则drop事件无法触发
        Console.WriteLine("dragover触发");
    }

    private void HandleDrop(DragEventArgs e)
    {
        e.PreventDefault();
        var data = e.DataTransfer.GetData("text/plain");
        Console.WriteLine($"drop触发，内容：{data}");
    }
}

额外补充 #

• 拖拽动画问题：WebView2默认拖拽UI和WebAssembly存在差异，若需自定义动画，可在dragstart事件中设置dataTransfer.effectAllowed，或通过CSS样式调整，无需复杂JS互操作。
• 交互式渲染：拖放事件不依赖交互式渲染，但若需启用，可在Program.cs中配置：

builder.Services.AddBlazorWebView(options =>
{
    options.HostPage = "wwwroot/index.html";
    options.InteractiveRenderMode = Microsoft.AspNetCore.Components.Web.InteractiveRenderMode.WebAssembly;
});

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