Drop Zone

Drag and Drop.

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.

Drop Rules

If a draggable item can be dropped or not can be controlled with the CanDrop function, either globally in the MudDropContainer or per MudDropZone.

Compost Bin
Recycle Bin
Trash Bin
Apple Core
Banana Peel
Old Battery
Pizza Box
Moldy Bread
Paper Bag
Uranium-235
<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item,dropzone) => item.Place == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-column flex-grow-1">
    <ChildContent>
        <div class="d-flex flex-wrap justify-space-between">
            <MudDropZone T="DropItem" Identifier="Compost" CanDrop="@((item) => item.Type == ItemType.Compost)" Class="rounded-lg mud-alert-text-success pa-4 ma-4 flex-grow-1">
                <MudText Typo="Typo.button" Class="ma-2">Compost Bin</MudText>
            </MudDropZone>
            <MudDropZone T="DropItem" Identifier="Recycle" CanDrop="@((item) => item.Type == ItemType.Recycle)" Class="rounded-lg mud-alert-text-warning pa-4 ma-4 flex-grow-1">
                <MudText Typo="Typo.button" Class="ma-2">Recycle Bin</MudText>
            </MudDropZone>
            <MudDropZone T="DropItem" Identifier="Trash" CanDrop="@((item) => item.Type == ItemType.Trash)" Class="rounded-lg mud-alert-text-info pa-4 ma-4 flex-grow-1">
                <MudText Typo="Typo.button" Class="ma-2">Trash Bin</MudText>
            </MudDropZone>
        </div>
        <MudDropZone T="DropItem" Identifier="Street" CanDrop="@((item) => false)" Class="rounded-lg mud-alert-text-normal pa-4 mt-6 mx-4 flex-grow-1 d-flex flex-wrap"/>
    </ChildContent>
    <ItemRenderer>
        <MudPaper Elevation="25" Class="pa-4 ma-2">@context.Name</MudPaper>
    </ItemRenderer>
</MudDropContainer>

@code {
    private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
    {
        dropItem.Item.Place = dropItem.DropzoneIdentifier;
    }
    
    private List<DropItem> _items = new()
    {
        new DropItem(){ Name = "Apple Core", Type = ItemType.Compost, Place = "Street" },
        new DropItem(){ Name = "Banana Peel", Type = ItemType.Compost, Place = "Street" },
        new DropItem(){ Name = "Old Battery", Type = ItemType.Trash, Place = "Street" },
        new DropItem(){ Name = "Pizza Box", Type = ItemType.Recycle, Place = "Street" },
        new DropItem(){ Name = "Moldy Bread", Type = ItemType.Compost, Place = "Street" },
        new DropItem(){ Name = "Paper Bag", Type = ItemType.Recycle, Place = "Street" },
        new DropItem(){ Name = "Uranium-235", Type = ItemType.Trash, Place = "Street" },
    };
    
    public class DropItem
    {
        public string Name { get; set; }
        public ItemType Type { get; set; }
        public string Place { get; set; }
    }

    public enum ItemType
    {
        Compost,
        Recycle,
        Trash
    }
}
Dragging Styles

Its possible to style the drop zone from which the dragged item starts from as well as the item itself with the DraggingClass parameter and the ItemDraggingClass property.

Folders
Wallpapers
Propaganda
Funny, Dank, Meme
Work
Photos
Files
Untitled spreadsheet
LoseLips.txt
Untitled document
GoonSwarmBestSwarm.png
co2traitors.txt
import.csv
MudBlazor Secrets
planned_components_2022-2023.txt
<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item,dropzone) => item.Identifier == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-column flex-grow-1">
    <ChildContent>
        <div class="d-flex flex-column flex-grow-1">
            <MudListSubheader Class="mt-4 pb-2">Folders</MudListSubheader>
            <MudDropZone T="DropItem" ItemDraggingClass="mud-info-text" Identifier="Folders" Class="d-flex flex-wrap flex-grow-1 pa-2 rounded" />
        </div>
        <div class="d-flex flex-column flex-grow-1">
            <MudListSubheader Class="mt-4 pb-2">Files</MudListSubheader>
            <MudDropZone T="DropItem" DraggingClass="mud-alert-text-normal" Identifier="Files" Class="d-flex flex-wrap flex-grow-1 pa-2 rounded" />
        </div>
        <div class="d-flex flex-column flex-grow-1">
            <MudListSubheader Class="mt-4 pb-2">MudBlazor Secrets</MudListSubheader>
            <MudDropZone T="DropItem" DraggingClass="mud-alert-text-error" ItemDraggingClass="mud-error-text" Identifier="MudBlazor" Class="d-flex flex-wrap flex-grow-1 pa-2 rounded" />
        </div>
    </ChildContent>
    <ItemRenderer>
        <div Class="rounded mud-paper-outlined d-flex align-center pa-3 ma-2">
            <MudIcon Icon="@(context.Identifier == "Folders" ? Icons.Custom.Uncategorized.Folder : Icons.Custom.FileFormats.FileDocument)" Color="Color.Inherit" Class="mr-2"/>
            @context.Name
        </div>
    </ItemRenderer>
</MudDropContainer>

@code {
    private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
    {
        dropItem.Item.Identifier = dropItem.DropzoneIdentifier;
    }
    
    private List<DropItem> _items = new()
    {
        new DropItem(){ Name = "Wallpapers", Identifier = "Folders" },
        new DropItem(){ Name = "Propaganda", Identifier = "Folders" },
        new DropItem(){ Name = "Funny, Dank, Meme", Identifier = "Folders" },
        new DropItem(){ Name = "Work", Identifier = "Folders" },
        new DropItem(){ Name = "Photos", Identifier = "Folders" },
        new DropItem(){ Name = "Untitled spreadsheet", Identifier = "Files" },
        new DropItem(){ Name = "LoseLips.txt", Identifier = "Files" },
        new DropItem(){ Name = "Untitled document", Identifier = "Files" },
        new DropItem(){ Name = "GoonSwarmBestSwarm.png", Identifier = "Files" },
        new DropItem(){ Name = "co2traitors.txt", Identifier = "Files" },
        new DropItem(){ Name = "import.csv", Identifier = "Files" },
        new DropItem(){ Name = "planned_components_2022-2023.txt", Identifier = "MudBlazor" },
    };
    
    public class DropItem
    {
        public string Name { get; init; }
        public string Identifier { get; set; }
    }
}
Disabled items

Drop items can be prevented from being dragged by using the ItemDisabled property.

Company Files

File1.txt

File3.txt

File4.txt

File6.txt

External USB

File2.txt

File5.txt

<MudDropContainer T="FileItem" ItemDisabled="@(item => item.IsLocked)" Items="_items"
                  ItemsSelector="@((item, dropzone) => item.TransferSlot == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-wrap">
    <ChildContent>
        <MudPaper Class="ma-4" Height="400px" Width="300px">
            <MudList T="string" Class="mud-height-full">
                <MudDropZone T="FileItem" Identifier="Company" Class="mud-height-full">
                    <MudListSubheader>Company Files</MudListSubheader>
                </MudDropZone>
            </MudList>
        </MudPaper>
        <MudPaper Class="ma-4" Height="400px" Width="300px">
            <MudList T="string" Class="mud-height-full">
                <MudDropZone T="FileItem" Identifier="External" Class="mud-height-full">
                    <MudListSubheader>External USB</MudListSubheader>
                </MudDropZone>
            </MudList>
        </MudPaper>
    </ChildContent>
    <ItemRenderer>
        <MudListItem T="string" Disabled="@(context.IsLocked ? true : false)" Icon="@Icons.Custom.FileFormats.FileDocument">
            @context.Name
        </MudListItem>
    </ItemRenderer>
</MudDropContainer>

@code {

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

    private List<FileItem> _items = new()
            {
            new FileItem() { Name = "File1.txt", IsLocked = false, TransferSlot = "Company" },
            new FileItem() { Name = "File2.txt", IsLocked = false, TransferSlot = "External" },
            new FileItem() { Name = "File3.txt", IsLocked = true, TransferSlot = "Company" },
            new FileItem() { Name = "File4.txt", IsLocked = true, TransferSlot = "Company" },
            new FileItem() { Name = "File5.txt", IsLocked = false, TransferSlot = "External" },
            new FileItem() { Name = "File6.txt", IsLocked = true, TransferSlot = "Company" },
        };

    public class FileItem
    {
        public string Name { get; init; }
        public bool IsLocked { get; set; }
        public string TransferSlot { get; set; }
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙