Blazor HTML5 Drag and Drop API 使用方法

来源：这里教程网时间：2026-02-21 17:33:03 作者：

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
<p><div @ref="sourceContainer" class="draggable-list">
@foreach (var item in items)
{
<div 
class="item" 
draggable="true" 
data-item-id="@item.Id" 
id="item-@item.Id">
@item.Name</p>
  }
<p><div @ref="targetContainer" class="drop-zone" @onclick="HandleClick">
Drop here → @droppedItemId</p><p>@code {
private ElementReference sourceContainer;
private ElementReference targetContainer;
private List<item> items = new() { new Item { Id = 1, Name = "Apple" }, new Item { Id = 2, Name = "Banana" } };
private string droppedItemId = "";</item></p><p>private DotNetObjectReference<dragdrophandler>? handlerRef;</dragdrophandler></p><p>protected override async Task OnInitializedAsync()
{
handlerRef = DotNetObjectReference.Create(new DragDropHandler(this));
await JSRuntime.InvokeVoidAsync("blazorDragDrop.setup", targetContainer, handlerRef);
}</p><p>public void OnDrop(string targetId, string data)
{
droppedItemId = data;
StateHasChanged();
}</p><p>public void OnDragStart(string itemId)
{
Console.WriteLine($"Dragging: {itemId}");
}</p><p>public class DragDropHandler
{
private readonly DragDropComponent component;</p><pre class="brush:php;toolbar:false;">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 和对象生命周期管理（记得在