Radzen Blazor Components

Radzen Blazor DropZone

The Blazor DropZone lets users drag and drop items between zones - for kanban boards and reordering.

Drag/Drop tasks between zones to update task status and order or in the same zone to reorder.

Moving tasks between "Not started" and "Completed" zones is disallowed using CanDrop callback.

Use ItemSelector callback to define which item in which zone will appear, Drop callback to customize the drop logic and ItemRender callback to customize if the item can be dragged, appearance, etc.

Not started

Task0
Task1
Task2

Started

Task3
Task4

Completed

Drop here to delete

Define can-drop and no-drop styles Link to this section

Use the built-in .rz-can-drop and .rz-no-drop CSS classes to apply styles and differentiate the DropZones that allow dropping from those that do not.

Not started

Task0
Task1
Task2

Started

Task3
Task4

Completed

Drop here to delete

Define a Footer Template per Drop Zone Link to this section

Add a footer template to the dropzone to display items below the rendered items.

Not started

Task0
Task1
Task2

Started

Task3
Task4

Completed

Drop here to delete

Frequently asked questions

How do I build a drag-and-drop list in Blazor?

Use RadzenDropZoneContainer with RadzenDropZone areas and handle the drop events to move items between zones.

Radzen Blazor Newsletter

Get an email when new components and releases ship.

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

Dedicated support backed by proven expertise

Premium themes and theme editor

Ready-to-use UI blocks

Complete app templates

Visual design-time-experience

Radzen Blazor Studio

Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Material 3 Expressive
  • Material 3 Expressive Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙