Blazor中需通过JS Interop桥接HTML5拖放事件与C#逻辑，核心是JS监听dragstart/dragover/drop并调用.NET方法，注意preventDefault、draggable属性及DotNetObjectReference生命周期管理。
Blazor 中使用 HTML5 Drag and Drop API 是可行的，但需注意它原生不直接支持 .NET 事件绑定（如 @ondragstart），必须通过 JavaScript 互操作（JS Interop）桥接 DOM 事件与 C# 方法。
基础原理：JS 事件 + .NET 回调
Blazor Server 或 WebAssembly 都不能直接在 Razor 标签中响应 dragstart、dragover、drop 等原生事件。你需要：
- 在页面中用
@ref获取元素引用（ElementReference） - 通过
IJSRuntime调用 JS 函数，在 JS 中监听拖放事件 - 在 JS 触发事件时，调用已注册的 .NET 方法（使用
DotNetObjectReference） - 在 C# 中处理拖放逻辑（如读取
DataTransfer、阻止默认行为、更新状态）
关键 JS 侧代码（需注入到 _Host.cshtml 或 index.html）
例如添加以下脚本（确保在 Blazor 启动前加载）：
window.blazorDragDrop = {
setup: (element, dotNetObj) => {
element.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', e.target.dataset.itemId || '');
dotNetObj.invokeMethodAsync('OnDragStart', e.target.id);
});
element.addEventListener('dragover', e => {
e.preventDefault(); // 必须！否则 drop 不触发
});
element.addEventListener('drop', e => {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
dotNetObj.invokeMethodAsync('OnDrop', e.target.id, data);
});
}
};C# 组件中集成示例
假设你想拖拽一个列表项到另一个容器：
立即学习“前端免费学习笔记（深入）”；
@page "/dragdrop" @inject IJSRuntime JSRuntime@foreach (var item in items) {@item.Name}Drop here → @droppedItemId@code { private ElementReference sourceContainer; private ElementReference targetContainer; private List
- items = new() { new Item { Id = 1, Name = "Apple" }, new Item { Id = 2, Name = "Banana" } }; private string droppedItemId = "";
private DotNetObjectReference
? handlerRef; protected override async Task OnInitializedAsync() { handlerRef = DotNetObjectReference.Create(new DragDropHandler(this)); await JSRuntime.InvokeVoidAsync("blazorDragDrop.setup", targetContainer, handlerRef); }
public void OnDrop(string targetId, string data) { droppedItemId = data; StateHasChanged(); }
public void OnDragStart(string itemId) { Console.WriteLine($"Dragging: {itemId}"); }
public class DragDropHandler { private readonly DragDropComponent component;
public DragDropHandler(DragDropComponent component) => this.component = component; [JSInvokable] public void OnDrop(string targetId, string data) => component.OnDrop(targetId, data); [JSInvokable] public void OnDragStart(string itemId) => component.OnDragStart(itemId);}
public class Item { public int Id { get; set; } public string Name { get; set; } = ""; } }
注意事项与常见坑
-
dragover 必须调用
e.preventDefault()，否则浏览器会阻止 drop 事件触发 - 只对
draggable="true"元素才能触发dragstart（文本、图片等原生可拖，但 div 默认不可拖） - 跨组件/跨页面拖放需自行管理数据序列化（
DataTransfer只支持字符串类型） - WebAssembly 中 JS Interop 延迟略高，高频拖放建议做防抖或用虚拟滚动优化
- 移动端不支持原生 drag/drop，需额外适配（如使用 Hammer.js 或 Pointer Events）
基本上就这些。核心是“JS 监听 + .NET 处理”，不复杂但容易忽略 preventDefault 和对象生命周期管理（记得在 Dispose 中释放 DotNetObjectReference）。
