Blazorise Drag & Drop component

Quickly drag and drop elements between the containers.

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

DragDrop image example Apple
DragDrop image example Bananas
DragDrop image example Broccoli
DragDrop image example Cherry

Fruit

DragDrop image example Lemon
DragDrop image example Strawberry

Vegetable

DragDrop image example 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" Text="DragDrop image example" 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 Task ItemDropped( DraggableDroppedEventArgs<DropItem> dropItem )
    {
        dropItem.Item.Group = dropItem.DropZoneName;
        return Task.CompletedTask;
    }
}

Reorder items

Items can be reordered inside each dropzone with the AllowReorder bool set to true on the dropzone.

Drop Zone 1

Item 1
Item 2
Item 3

Drop Zone 2

Item 4
Item 5

Drop Zone 3

<DropContainer TItem="DropItem" Items="@items" ItemsFilter="@((item, dropZone) => item.Group == dropZone)" ItemDropped="@ItemDropped" Flex="Flex.Wrap.Grow.Is1">
    <ChildContent>
        @for ( int i = 1; i < 4; i++ )
        {
            var dropzone = i.ToString();

            <DropZone TItem="DropItem" Name="@dropzone" AllowReorder Padding="Padding.Is3" Margin="Margin.Is3" Flex="Flex.Grow.Is1">
                <Heading Size="HeadingSize.Is4" Margin="Margin.Is3.FromBottom">Drop Zone @dropzone</Heading>
            </DropZone>
        }
    </ChildContent>
    <ItemTemplate>
        <Card Shadow="Shadow.Default" Margin="Margin.Is3.OnY">
            <CardBody>
                @context.Name
            </CardBody>
        </Card>
    </ItemTemplate>
</DropContainer>

@code {
    public class DropItem
    {
        public string Name { get; init; }

        public string Group { get; set; }
    }

    private List<DropItem> items = new()
    {
        new DropItem() { Name = "Item 1", Group = "1" },
        new DropItem() { Name = "Item 2", Group = "1" },
        new DropItem() { Name = "Item 3", Group = "1" },
        new DropItem() { Name = "Item 4", Group = "2" },
        new DropItem() { Name = "Item 5", Group = "2" },
    };

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

API

Methods

DropContainer

Name DescriptionReturnParameters
Refresh() Request the refresh of the drag container. void
GetTransactionItem() Gets the item that is currently in the transaction. TItem
GetTransactionIndex() Gets the current transaction index. int

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
AllowReorder If true, the reordering of the items will be enabled. bool false
OnlyZone If true, will only act as a dropable zone and not render any items. bool false
On this page