.NET Core 3.0升级.NET 6.0后Blazor移动端拖拽事件失效问题

架构老林

2026-8-28

.NET 6升级后Blazor移动端拖拽事件不触发问题

前期实现情况

拖拽功能参考Chris Sainty推出的Blazor拖拽功能演示方案开发，这套方案实现思路精巧，对应源码可从作者公开Git仓库下载
为了让示例兼容移动端，引入了DragDropTouch polyfill做适配，脚本引入代码如下：

<script id="DragDropTouch" src="https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>

调试时使用Conveyor工具支持移动端访问测试，在.NET Core 3.0版本时，iOS端的Safari、Chrome浏览器下拖拽功能运行完全正常

升级后异常表现

将项目从.NET Core 3.0升级至.NET 6.0后，移动端的@ondragstart和@ondrop事件不再触发：

JavaScript侧仍可正常捕获拖拽事件，说明polyfill本身工作正常
Blazor框架侧无法接收到对应事件
桌面端在.NET 6.0、.NET Core 3.0版本下拖拽功能均运行完全正常

现象验证

JavaScript侧dragstart事件可正常触发，测试代码如下：

document.addEventListener('dragstart', function(ev) {
    if (ev.target.classList.contains('draggable')) {
        console.log('dragging');
    } else {
        console.log('ignoring draggable');
    }
});

Blazor组件绑定的dragstart事件完全无响应，对应组件代码如下：

<li class="draggable" draggable="true" title="@JobModel.Description" @ondragstart="@(() => HandleDragStart(JobModel))" >
    <p class="description">@JobModel.Description</p>
    <p class="last-updated"><small>Last Updated</small> @JobModel.LastUpdated.ToString("HH:mm.ss tt")</p>
</li>

@code {
    [CascadingParameter] JobsContainer Container { get; set; }
    [Parameter] public JobModel JobModel { get; set; }

    private void HandleDragStart(JobModel selectedJob)
    {
        Container.Payload = selectedJob;
    }
}