Drag & Drop

The Drag & Drop is comprised of DropContainer and DropZone components. The DropContainer is used as a container for all items that are being dragged, along with the DropZone's that are basically an areas to drag the items.

  • <DropContainer>
    • <DropZone>

Examples

Basic

To start, first define a DropContainer and assign the Items to it.

Next you define DropZone's and assign them a unique Name. The Name, along with the ItemsFilter parameter is used to determine to which DropZone an item will belong.

The callback ItemDropped is used to update the data item, when a drag operation has finished.

Basket

Apple
Bananas
Broccoli
Cherry

Fruit

Lemon
Strawberry

Vegetable

Cabbage
<DropContainer TItem="DropItem" Items="@items" ItemsFilter="@((item, dropZone) => item.Group == dropZone)" ItemDropped="@ItemDropped" Flex="Flex.Wrap.Grow.Is1">
    <ChildContent>
        <DropZone TItem="DropItem" Name="Basket" Border="Border.Rounded" Background="Background.Light" Padding="Padding.Is3" Margin="Margin.Is3" Flex="Flex.Grow.Is1">
            <Heading Size="HeadingSize.Is4" Margin="Margin.Is3.FromBottom">Basket</Heading>
        </DropZone>
        <DropZone TItem="DropItem" Name="Fruit" DropAllowed="@((item) => item.Fruit)" Border="Border.Rounded" Background="Background.Light" Padding="Padding.Is3" Margin="Margin.Is3" Flex="Flex.Grow.Is1">
            <Heading Size="HeadingSize.Is4" Margin="Margin.Is3.FromBottom">Fruit</Heading>
        </DropZone>
        <DropZone TItem="DropItem" Name="Vegetable" DropAllowed="@((item) => !item.Fruit)" Border="Border.Rounded" Background="Background.Light" Padding="Padding.Is3" Margin="Margin.Is3" Flex="Flex.Grow.Is1">
            <Heading Size="HeadingSize.Is4" Margin="Margin.Is3.FromBottom">Vegetable</Heading>
        </DropZone>
    </ChildContent>
    <ItemTemplate>
        <Card Shadow="Shadow.Default" Margin="Margin.Is3.OnY">
            <CardBody>
                <Image Source="@context.Image" Style="width:48px;height:48px;" />
                @context.Name
            </CardBody>
        </Card>
    </ItemTemplate>
</DropContainer>
@code {
    public class DropItem
    {
        public string Name { get; init; }

        public string Group { get; set; }

        public string Image { get; set; }

        public bool Fruit { get; set; }
    }

    private List<DropItem> items = new()
    {
        new DropItem() { Name = "Apple", Group = "Basket", Image = "img/fruit/apple.png", Fruit = true },
        new DropItem() { Name = "Bananas", Group = "Basket", Image = "img/fruit/bananas.png", Fruit = true },
        new DropItem() { Name = "Lemon", Group = "Fruit", Image = "img/fruit/lemon.png", Fruit = true },
        new DropItem() { Name = "Broccoli", Group = "Basket", Image = "img/fruit/broccoli.png" },
        new DropItem() { Name = "Strawberry", Group = "Fruit", Image = "img/fruit/strawberry.png", Fruit = true },
        new DropItem() { Name = "Cherry", Group = "Basket", Image = "img/fruit/cherry.png", Fruit = true },
        new DropItem() { Name = "Cabbage", Group = "Vegetable", Image = "img/fruit/cabbage.png" },
    };

    private void ItemDropped( DraggableDroppedEventArgs<DropItem> dropItem )
    {
        dropItem.Item.Group = dropItem.DropZoneName;
    }
}

Attributes

DropContainer

Name Description Type Default
TItem Items data type. generic
Items Items that are used for the drag&drop withing the container. IEnumerable<TItem>
ItemsFilter The method used to determine if the item belongs to the dropzone. Func<TItem, string, bool>
ItemTemplate The render method that is used to render the items withing the dropzone. RenderFragment<TItem>
ItemDropped Callback that indicates that an item has been dropped on a drop zone. Should be used to update the "status" of the data item. EventCallback<DraggableDroppedEventArgs<TItem>>
DropAllowed Determines if the item is allowed to be dropped to the specified zone. Func<TItem, string, bool> null
DropAllowedClass Classname that is applied if dropping to the current zone is allowed. string null
DropNotAllowedClass Classname that is applied if dropping to the current zone is not allowed. string null
ItemDisabled Determines if the item is disabled for dragging and dropping. Func<TItem, bool> null
DisabledClass Classname that is applied to the dropzone if the result of ItemDisabled is false. string null
DraggingClass Classname that is applied to the dropzone when the drag operation has started. string null
ItemDraggingClass Classname that is applied to the drag item when it is being dragged. string null

DropZone

Name Description Type Default
Name Gets or sets the unique name of the dropzone. string null
ItemsFilter The method used to determine if the item belongs to the dropzone. Func<TItem, bool>
ItemTemplate The render method that is used to render the items withing the dropzone. RenderFragment<TItem>
DropAllowed Determines if the item is allowed to be dropped to the specified zone. Func<TItem, string, bool> null
DropAllowedClass Classname that is applied if dropping to the current zone is allowed. string null
DropNotAllowedClass Classname that is applied if dropping to the current zone is not allowed. string null
ItemDisabled Determines if the item is disabled for dragging and dropping. Func<TItem, bool> null
DisabledClass Classname that is applied to the dropzone if the result of ItemDisabled is false. string null
DraggingClass Classname that is applied to the dropzone when the drag operation has started. string null
ItemDraggingClass Classname that is applied to the drag item when it is being dragged. string null