C#•4w ago

MudBlazor DropContainer not triggering ItemDropped

I have the following MudBlazor MudDropContainer:

<!-- Dropzone for reorganizing and editing the Check Items -->
<MudDropContainer T="CustomDropItem" @ref="_dropContainer" Class="align-center justify-start" 
        Items=@_items
        ItemPicked=@ItemSelected
        ItemDropped=@ItemUpdated
        ItemsSelector=@((item, dropzone) => item.Selector == dropzone)
        ApplyDropClassesOnDragStarted
        >
    <ChildContent>
         <MudDropZone T="CustomDropItem" Class="flex-grow-1" AllowReorder Identifier=@DropzoneId />
    </ChildContent>
    <ItemRenderer>
         <MudStack [email protected] Class="ma-3">
            <MudStack Row Class="py-n3 my-0" Style=@($"background-color: {context.Value.Colour};")
                AlignItems="AlignItems.Center" Justify="Justify.FlexStart">

                <MudPopover Class="mud-theme-default py-1 my-1" Open="@(_editIndex == context.SortOrder)"
                    AnchorOrigin="Origin.CenterLeft" TransformOrigin="Origin.CenterRight">

                    <!-- Content based on the type of TaskValue -->
                </MudPopover>
            </MudStack>
        </MudStack>
    </ItemRenderer>
</MudDropContainer>

<!-- Dropzone for reorganizing and editing the Check Items -->
<MudDropContainer T="CustomDropItem" @ref="_dropContainer" Class="align-center justify-start" 
        Items=@_items
        ItemPicked=@ItemSelected
        ItemDropped=@ItemUpdated
        ItemsSelector=@((item, dropzone) => item.Selector == dropzone)
        ApplyDropClassesOnDragStarted
        >
    <ChildContent>
         <MudDropZone T="CustomDropItem" Class="flex-grow-1" AllowReorder Identifier=@DropzoneId />
    </ChildContent>
    <ItemRenderer>
         <MudStack [email protected] Class="ma-3">
            <MudStack Row Class="py-n3 my-0" Style=@($"background-color: {context.Value.Colour};")
                AlignItems="AlignItems.Center" Justify="Justify.FlexStart">

                <MudPopover Class="mud-theme-default py-1 my-1" Open="@(_editIndex == context.SortOrder)"
                    AnchorOrigin="Origin.CenterLeft" TransformOrigin="Origin.CenterRight">

                    <!-- Content based on the type of TaskValue -->
                </MudPopover>
            </MudStack>
        </MudStack>
    </ItemRenderer>
</MudDropContainer>

This was working in v6 but since I updated to v7, I cant get ItemDropped to trigger. The transaction keeps failing.

1 Reply

Saiyanslayer•4w ago

I simplified it and added Mudlist:

<MudDropContainer T="CustomDropItem" @ref="_dropContainer" Class="align-center justify-start" 
        Items=@_items
        ItemPicked=@ItemSelected
        ItemDropped=@ItemUpdated
        ItemsSelector=@((item, dropzone) => item.Selector == dropzone) >
    <ChildContent>
        <MudList T="string" Class="d-flex flex-column mud-full-height" Style="width: 100%">
            <MudDropZone T="CustomDropItem" Class="flex-grow-1" AllowReorder Identifier="dropzone" />
        </MudList>
    </ChildContent>
    <ItemRenderer>
        <MudListItem T="string" [email protected] >

        </MudListItem>
    </ItemRenderer>
</MudDropContainer>

<MudDropContainer T="CustomDropItem" @ref="_dropContainer" Class="align-center justify-start" 
        Items=@_items
        ItemPicked=@ItemSelected
        ItemDropped=@ItemUpdated
        ItemsSelector=@((item, dropzone) => item.Selector == dropzone) >
    <ChildContent>
        <MudList T="string" Class="d-flex flex-column mud-full-height" Style="width: 100%">
            <MudDropZone T="CustomDropItem" Class="flex-grow-1" AllowReorder Identifier="dropzone" />
        </MudList>
    </ChildContent>
    <ItemRenderer>
        <MudListItem T="string" [email protected] >

        </MudListItem>
    </ItemRenderer>
</MudDropContainer>

still no luck. It triggers ItemPicked and the transaction canceling Created the example, still no luck:

<MudDropContainer T="DropItem" Items=@_items 
    ItemsSelector=@((item, zone) => item.Zone == DropzoneId)
    ItemDropped=@ItemDropped
    >

    <ChildContent>
        <MudList T="string" >
            <MudDropZone T="DropItem" Identifier=@DropzoneId AllowReorder />
        </MudList>
    </ChildContent>

    <ItemRenderer>
        <MudListItem T="string" [email protected] />
    </ItemRenderer>

</MudDropContainer>

@code {
    public record DropItem(string Name, string Zone);

    private const string DropzoneId = "groupzone";

    private void ItemDropped(MudItemDropInfo<DropItem> item) {
        var result = item.Item with { Zone = item.DropzoneIdentifier };
    }

    private List<DropItem> _items = new() {
        new DropItem("Option 1", DropzoneId),
        new DropItem("Option 2", DropzoneId),
        new DropItem("Option 3", DropzoneId),
        new DropItem("Option 4", DropzoneId),
    };
}

<MudDropContainer T="DropItem" Items=@_items 
    ItemsSelector=@((item, zone) => item.Zone == DropzoneId)
    ItemDropped=@ItemDropped
    >

    <ChildContent>
        <MudList T="string" >
            <MudDropZone T="DropItem" Identifier=@DropzoneId AllowReorder />
        </MudList>
    </ChildContent>

    <ItemRenderer>
        <MudListItem T="string" [email protected] />
    </ItemRenderer>

</MudDropContainer>

@code {
    public record DropItem(string Name, string Zone);

    private const string DropzoneId = "groupzone";

    private void ItemDropped(MudItemDropInfo<DropItem> item) {
        var result = item.Item with { Zone = item.DropzoneIdentifier };
    }

    private List<DropItem> _items = new() {
        new DropItem("Option 1", DropzoneId),
        new DropItem("Option 2", DropzoneId),
        new DropItem("Option 3", DropzoneId),
        new DropItem("Option 4", DropzoneId),
    };
}

hrm, and this code does work on try.Mudblazor.com

Gaming

Programming

MudBlazor DropContainer not triggering ItemDropped