MudBlazor - Blazor Component Library

API

Basic Usage

Drop Zone 1

Drag me!

Just Mud

Drop Zone 2

Or me!

<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item,dropzone) => item.Identifier == dropzone)" 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 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; }
    }
}

Nested Drop Zones

Drop Zone 1

Item 1

Item 2

Drop Zone 2

Item 3

<MudDropContainer T="DropZoneItem" Items="_items" ItemsSelector="@((item, dropzone) => item.Zone == dropzone)" ItemDropped="ItemUpdated" Class="4 flex-grow-1">
    <ChildContent>
        <MudDropContainer T="DropZone" Items="_zones" ItemsSelector="@((item, dropzone) => true)" Class="5">
            <ChildContent>
                <MudDropZone T="DropZone" AllowReorder Class="6 rounded mud-background-gray px-4 py-1 ma-4" />
             </ChildContent>
             <ItemRenderer>
                 <MudPaper Class="pa-4 my-4">
                     <MudText Typo="Typo.h6">@context.Name</MudText>
                     <MudDropZone T="DropZoneItem" Identifier="@context.Name" AllowReorder Class="rounded mud-background-gray px-4 py-1 ma-4" />
                 </MudPaper>
             </ItemRenderer>
         </MudDropContainer>
     </ChildContent>
     <ItemRenderer>
         <MudPaper Class="pa-4 my-4">
             <MudText>@context.Name</MudText>
         </MudPaper>
     </ItemRenderer>
 </MudDropContainer>

@code {

    private void ItemUpdated(MudItemDropInfo<DropZoneItem> dropItem) => dropItem.Item.Zone = dropItem.DropzoneIdentifier;

    private List<DropZone> _zones = new()
    {
        new() { Name = "Drop Zone 1" },
        new() { Name = "Drop Zone 2" }
    };

    private List<DropZoneItem> _items = new()
    {
        new() { Zone = "Drop Zone 1", Name = "Item 1" },
        new() { Zone = "Drop Zone 1", Name = "Item 2" },
        new() { Zone = "Drop Zone 2", Name = "Item 3" },
    };

    private class DropZone
    {
        public string Name { get; init; }
    }

    private class DropZoneItem
    {
        public string Zone { get; set; }
        public string Name { get; init; }
    }
}

Transfer items between Drop Zones

The MudDropContainer supports transferring dragged items between its drop zones. The MudDropContainer holds the collection of items used for dragging.