BcVirtualDrag
Description
The BcVirtualDrag system provides a flexible drag-and-drop implementation for Blazor components without relying on HTML5 drag attributes. It uses manual position detection via DOM bounds and supports any CSS layout (flex, grid, flow). Components can be dragged between containers and drop validation is handled via DragGroup matching.
Container Properties
Configuration
BcDragConfiguration
Configuration object controlling drag behavior such as threshold, ghost opacity, and visibility.
ContainerId
string
Unique identifier for the container element in the DOM.
RenderWidth
string
BcVirtualDragPage.ContainerProperties.RenderWidth.Description
Height
string
Height of the container (CSS value, e.g., "auto" or "400px").
ChildContent
RenderFragment
The draggable components to render inside the container.
GhostTemplate
RenderFragment < BcDragContext >
Optional template for rendering a custom ghost/preview during drag operations.
Container Events
OnDragStarted
EventCallback < BcDragContext >
Triggered when a drag operation begins on any component in the container.
OnDragEnded
EventCallback < BcDragContext >
Triggered when a drag operation ends (drop, cancel, or release).
OnDropCompleted
EventCallback < BcDragContext >
Triggered when a successful drop occurs on a valid target.
Component Properties (BcDragComponent)
DragData
object?
Optional data payload attached to the draggable component for identification.
DragGroup
string
Group identifier for drag/drop compatibility. Components can only be dropped on targets with matching groups.
IsDraggable
bool
Whether this component can be dragged.
IsDropTarget
bool
Whether this component can accept drops from other components.
DrawIndex
int
Z-order for rendering and event handling. Higher values are on top.
Configuration Properties (DragConfiguration)
DragThreshold
double
Minimum distance in pixels the mouse must move before drag starts. Prevents accidental drags on click.
GhostOpacity
double
Opacity of the ghost element during drag (0.0 to 1.0).
ShowGhost
bool
Whether to show a ghost/preview at the cursor position during drag.
Sample
File Manager Example
Drag files to folders. Files with DragGroup="files" can only be dropped on folders with the same group. The "Secret.key" file has DragGroup="secure" and can only be dropped in the "Secure Vault".
Files
Folders
Sortable
Here are some examples of sortable virtual drag lists.