.NET MAUI中WebView拖拽功能失效问题求助

一、平台专属配置调整 #

Android平台 #

MAUI默认的Android WebView可能未启用必要的交互特性，需自定义WebViewHandler开启相关设置：

创建自定义Handler类：

using Android.Webkit;
using Microsoft.Maui.Handlers;

namespace YourAppNamespace.Handlers;

public class CustomWebViewHandler : WebViewHandler
{
    protected override void ConnectHandler(Android.Webkit.WebView platformView)
    {
        base.ConnectHandler(platformView);
        
        var settings = platformView.Settings;
        settings.JavaScriptEnabled = true;
        settings.DomStorageEnabled = true;
        settings.AllowFileAccess = true;
        settings.SetAppCacheEnabled(true);
        
        platformView.SetWebChromeClient(new WebChromeClient());
    }
}

在MauiProgram.cs中注册该Handler：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<IWebView, CustomWebViewHandler>();
#endif
});

iOS平台 #

iOS的WKWebView需要确保JavaScript和相关偏好设置正确，自定义Handler如下：

using WebKit;
using Microsoft.Maui.Handlers;

namespace YourAppNamespace.Handlers;

public class CustomWebViewHandler : WebViewHandler
{
    protected override WKWebView CreatePlatformView()
    {
        var configuration = new WKWebViewConfiguration();
        configuration.Preferences.JavaScriptEnabled = true;
        configuration.Preferences.JavaScriptCanOpenWindowsAutomatically = true;
        
        return new WKWebView(CGRect.Empty, configuration);
    }
}

同样在MauiProgram.cs注册：

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS
    handlers.AddHandler<IWebView, CustomWebViewHandler>();
#endif
});

二、网页端代码兼容调整 #

MAUI WebView对非标准HTML5拖拽特性支持有限，需调整JS与HTML代码：

1. 改用标准dataTransfer数据类型，避免自定义类型：

function drag(ev) {
    // 将id和value拼接为字符串传递
    ev.dataTransfer.setData("text/plain", `${ev.target.id}|${ev.target.value}`);
}

2. 补充dragover事件处理（必须调用preventDefault才能触发drop）：

function allowDrop(ev) {
    ev.preventDefault();
}

// 修改drop函数解析数据
function drop(ev, dropableValue, dropid) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/plain").split('|');
    var targetId = data[0];
    var targetValue = data[1];
    
    // 后续原有逻辑保持不变，替换原data和value变量即可
    attempts = parseInt($('#attempts').text());
    correctans = parseInt($('#correctans').text());
    if (attempts != 0) {
        attempts--;
        $('#attempts').text(attempts);
        if (targetValue == dropableValue) {
            showAlert(1);
            document.getElementById(dropid).appendChild(document.getElementById(targetId).cloneNode(true));
          
                  correctans++;
            $('#correctans').text(correctans + '/' + totalquestion);
            if(attempts == 0)
            {
                $('.optionDiv :input').attr('disabled', true);
            
            var percentage = (correctans/totalquestion)*100;
            completedAlert(attempts, correctans, percentage.toFixed(2));
        }
            $(`#${targetId}`).removeClass("answerclass");
            $('#' + dropid).removeProp("ondragover");
            $('#' + targetId).removeProp("draggable");
            count += 1;
      
            if (count == 10) {
                $('input').attr('disabled', true);
                var percentage = (correctans / totalquestion) * 100;
                completedAlert(attempts, correctans, percentage.toFixed(2));
            }
        }
        else {
            showAlert(2);
            if(attempts == 0)
            {
                $('.optionDiv :input').attr('disabled', true);
            
            var percentage = (correctans/totalquestion)*100;
            completedAlert(attempts, correctans, percentage.toFixed(2));
        }
        }
    }
    else {
        $('input').attr('disabled', true);
        var percentage = (correctans / totalquestion) * 100;
        completedAlert(attempts, correctans, percentage.toFixed(2));
    }
}

3. 确保放置容器绑定ondragover事件：

<!-- 示例放置容器 -->
<div id="dropArea" ondragover="allowDrop(event)" ondrop="drop(event, '目标值', 'dropArea')">
    <!-- 容器内容 -->
</div>

三、额外排查点 #

• 确保使用.NET MAUI 7及以上版本，旧版本WebView的HTML5支持不完善。
• 测试设备/模拟器系统版本：Android建议API 26+，iOS建议15+。

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