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）。
以上就是Blazor HTML5 Drag and Drop API 使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1442851.html
微信扫一扫 
支付宝扫一扫 
