Mudblazor MudDropZone - 简单的 Blazor 应用程序 - 如何捕获 DragStart 和 DragEnd 事件？

Question

最简单的示例可以在他们的网站上找到：（https://www.mudblazor.com/components/dropzone#basic-usage）我想修改此示例并捕获 OnDragStart 和 OnDragEnd 事件，如其文档中所述:

没有一个示例显示如何执行此操作。我似乎无法弄清楚。我可能错过了一些明显的东西。我不想使用 javascript，我想使用文档中列出的 MudBlazor 调用。有人有办法做到这一点吗？ 我想做的就是 Console.WriteLine("On Dragstart" + item.Name) 和 Console.WriteLine("On Dragend" + item.Name)。我知道当我看到答案时我会踢自己，但没有任何效果，而且我没有看到它。

Answer 1

我认为您提供的文档已经过时。

在最新版本（目前为 7.15）中，您应该使用

ItemPicked

事件回调，如下所示：

<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item,dropzone) => item.Identifier == dropzone)" ItemPicked="ItemPicked" ItemDropped="ItemUpdated" Class="d-flex flex-wrap flex-grow-1">
    <ChildContent>
        <MudDropZone T="DropItem" Identifier="Drop Zone 1" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4">Drop Zone 1</MudText>
        </MudDropZone>
        <MudDropZone T="DropItem" Identifier="Drop Zone 2" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4">Drop Zone 2</MudText>
        </MudDropZone>
    </ChildContent>
    <ItemRenderer>
        <MudPaper Elevation="25" Class="pa-4 my-4">@context.Name</MudPaper>
    </ItemRenderer>
</MudDropContainer>

@code {

    private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
    {
        dropItem.Item.Identifier = dropItem.DropzoneIdentifier;
    }

    private void ItemPicked(MudDragAndDropItemTransaction<DropItem> dropItem)
    {
        Console.WriteLine(dropItem.Item.Name);
    }

    private List<DropItem> _items = new()
    {
        new DropItem(){ Name = "Drag me!", Identifier = "Drop Zone 1" },
        new DropItem(){ Name = "Or me!", Identifier = "Drop Zone 2" },
        new DropItem(){ Name = "Just Mud", Identifier = "Drop Zone 1" },
    };
    
    public class DropItem
    {
        public string Name { get; init; }
        public string Identifier { get; set; }
    }
}