如何禁用UWP中WebView2控件的拖放功能？

直接设置WebView2的AllowDrop="False"或CanDrag="False"无法禁用网页内部的拖放行为——这些属性仅控制WebView2控件与外部应用/系统的拖放交互，网页自身的拖放逻辑由DOM事件驱动，需通过注入JavaScript来禁用。

实现步骤 #

• 监听WebView2的导航完成事件，确保网页加载完成后注入禁用拖放的JS代码
• 通过CoreWebView2.ExecuteScriptAsync执行JS，阻止网页的拖放相关事件

修改后的代码示例 #

XAML部分（保持原结构即可）：

xmlns:controls="using:Microsoft.UI.Xaml.Controls"

<controls:WebView2 x:Name="_WebView2" Height="370" Width="792"
    NavigationStarting="WebView2_NavigationStarting"/>

C#部分：

await _WebView2.EnsureCoreWebView2Async();
// 注册导航完成事件，确保每次网页加载后都禁用拖放
_WebView2.CoreWebView2.FrameNavigationCompleted += CoreWebView2_FrameNavigationCompleted;
_WebView2.CoreWebView2.Navigate(sourceStr);

// 导航完成事件处理方法
private void CoreWebView2_FrameNavigationCompleted(Microsoft.Web.WebView2.Core.CoreWebView2 sender, Microsoft.Web.WebView2.Core.CoreWebView2NavigationCompletedEventArgs args)
{
    if (args.IsSuccess)
    {
        // 注入JS禁用拖放事件
        string disableDragDropScript = @"
            document.addEventListener('dragstart', function(e) { e.preventDefault(); }, true);
            document.addEventListener('dragover', function(e) { e.preventDefault(); }, true);
            document.addEventListener('drop', function(e) { e.preventDefault(); }, true);
            document.addEventListener('dragenter', function(e) { e.preventDefault(); }, true);
            document.addEventListener('dragleave', function(e) { e.preventDefault(); }, true);
        ";
        _ = sender.ExecuteScriptAsync(disableDragDropScript);
    }
}

补充说明 #

• 使用FrameNavigationCompleted而非NavigationCompleted，可覆盖子框架的导航场景，确保所有页面内容加载后都生效
• JS中的true参数表示使用捕获阶段监听事件，能更彻底地阻止拖放行为
• 若网页存在动态加载内容，可结合MutationObserver持续禁用新增元素的拖放，基础场景下上述代码已足够

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