MudBlazor MudDropZone如何捕获OnDragStart与OnDragEnd事件？

要在MudDropZone的基础示例中捕获拖动开始和结束事件，无需JavaScript，直接通过Blazor原生事件绑定结合MudBlazor组件即可实现。核心是给可拖动项绑定@ondragstart和@ondragend事件，并传递当前项作为参数。

完整代码示例 #

@* MudDropZone 基础用法改造，添加拖动事件捕获 *@
<MudDropZone T="MyItem" Items="@_items" Class="d-flex flex-wrap gap-2">
    <ItemContext>
        <!-- 给可拖动的MudCard绑定拖动事件 -->
        <MudCard Width="180px" Height="120px" Draggable="true" Class="pa-4"
                 @ondragstart="(e) => HandleDragStart(e, context.Item)"
                 @ondragend="(e) => HandleDragEnd(e, context.Item)">
            <MudText>@context.Item.Name</MudText>
        </MudCard>
    </ItemContext>
</MudDropZone>

@code {
    // 自定义数据模型，包含Name属性
    public class MyItem
    {
        public string Name { get; set; } = string.Empty;
    }

    // 初始化测试数据
    private List<MyItem> _items = new()
    {
        new MyItem { Name = "文档1" },
        new MyItem { Name = "文档2" },
        new MyItem { Name = "文档3" }
    };

    // 拖动开始事件处理
    private void HandleDragStart(MouseEventArgs e, MyItem item)
    {
        Console.WriteLine($"On dragstart {item.Name}");
    }

    // 拖动结束事件处理
    private void HandleDragEnd(MouseEventArgs e, MyItem item)
    {
        Console.WriteLine($"On dragend {item.Name}");
    }
}

关键说明 #

1. 事件绑定：通过Blazor的原生事件绑定语法@ondragstart和@ondragend，将事件触发时的逻辑指向自定义处理方法，并通过Lambda表达式传递当前拖动的item对象。
2. Draggable属性：必须给可拖动组件（这里是MudCard）设置Draggable="true"，否则无法触发拖动相关事件。
3. 类型适配：示例中使用了自定义MyItem类（包含Name属性），你可以根据实际数据模型调整类型和属性名称。

内容的提问来源于stack exchange，提问作者Mr. Awesome