Blazor HTML5 Drag and Drop API 使用方法

技术教程
2025-12-12 16:40:59

Blazor中需通过JS Interop桥接HTML5拖放事件与C#逻辑，核心是JS监听dragstart/dragover/drop并调用.NET方法，注意preventDefault、draggable属性及DotNetObjectReference生命周期管理。

blazor html5 drag and drop api 使用方法

Blazor 中使用 HTML5 Drag and Drop API 是可行的，但需注意它原生不直接支持 .NET 事件绑定（如 @ondragstart），必须通过 J*aScript 互操作（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# 组件中集成示例

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

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

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

277 查看详情火龙果写作

@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></div>
  }
</div><p><div @ref="targetContainer" class="drop-zone" @onclick="HandleClick">
Drop here → @droppedItemId</p></div><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 = "";</p><p>private DotNetObjectReference<DragDropHandler>? handlerRef;</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; } = ""; } }