c# - Mudblazor MudDropZone - Simple Blazor App - How do I catch DragStart and DragEnd events? - Stack Overflow

admin管理员组

文章数量:1033671

The simplest example can be found on their website: () I want to modify this example and catch the OnDragStart and OnDragEnd event as noted in their documentation:

None of the examples show how to do this. I can't seem to figure it out. I'm missing something obvious probably. I don't want to use javascript, I want to use the MudBlazor calls as they are listed in the documentation. Does anyone have a way to do this? All I want to do is a Console.WriteLine("On dragstart" + item.Name) and Console.WriteLine("On dragend" + item.Name). I know I'll kick myself when I see the answer but nothing has worked and I'm not seeing it.

The simplest example can be found on their website: (https://www.mudblazor/components/dropzone#basic-usage) I want to modify this example and catch the OnDragStart and OnDragEnd event as noted in their documentation:

None of the examples show how to do this. I can't seem to figure it out. I'm missing something obvious probably. I don't want to use javascript, I want to use the MudBlazor calls as they are listed in the documentation. Does anyone have a way to do this? All I want to do is a Console.WriteLine("On dragstart" + item.Name) and Console.WriteLine("On dragend" + item.Name). I know I'll kick myself when I see the answer but nothing has worked and I'm not seeing it.

• c#
• blazor
• mudblazor

Share Improve this question Follow asked Nov 17, 2024 at 0:38 Mr. AwesomeMr. Awesome 60911 gold badge77 silver badges2020 bronze badges 1

• 1 The docs for those are here in MudContainers Api – RBee Commented Nov 17, 2024 at 20:57

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

I believe the documentation you provided is outdated.

In the latest version (7.15 at this moment) you should use ItemPicked event callback like this:

<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; }
    }
}

The simplest example can be found on their website: () I want to modify this example and catch the OnDragStart and OnDragEnd event as noted in their documentation:

None of the examples show how to do this. I can't seem to figure it out. I'm missing something obvious probably. I don't want to use javascript, I want to use the MudBlazor calls as they are listed in the documentation. Does anyone have a way to do this? All I want to do is a Console.WriteLine("On dragstart" + item.Name) and Console.WriteLine("On dragend" + item.Name). I know I'll kick myself when I see the answer but nothing has worked and I'm not seeing it.

The simplest example can be found on their website: (https://www.mudblazor/components/dropzone#basic-usage) I want to modify this example and catch the OnDragStart and OnDragEnd event as noted in their documentation:

None of the examples show how to do this. I can't seem to figure it out. I'm missing something obvious probably. I don't want to use javascript, I want to use the MudBlazor calls as they are listed in the documentation. Does anyone have a way to do this? All I want to do is a Console.WriteLine("On dragstart" + item.Name) and Console.WriteLine("On dragend" + item.Name). I know I'll kick myself when I see the answer but nothing has worked and I'm not seeing it.

• c#
• blazor
• mudblazor

Share Improve this question Follow asked Nov 17, 2024 at 0:38 Mr. AwesomeMr. Awesome 60911 gold badge77 silver badges2020 bronze badges 1

• 1 The docs for those are here in MudContainers Api – RBee Commented Nov 17, 2024 at 20:57

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

I believe the documentation you provided is outdated.

In the latest version (7.15 at this moment) you should use ItemPicked event callback like this:

<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; }
    }
}

本文标签： cMudblazor MudDropZoneSimple Blazor AppHow do I catch DragStart and DragEnd eventsStack Overflow