Blazor HTML5 Drag and Drop API 使用方法

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# 组件中集成示例

假设你想拖拽一个列表项到另一个容器：

立即学习“前端免费学习笔记（深入）”；

标签： javascript java html js go html5 浏览器 app ai win apple c# .ne