Blazor.DragDrop

This component provides user-friendly drag and drop functionality for Blazor applications.

Features

• Drag and drop items within a list, both horizontally and vertically.
• Drag and drop items between multiple lists. (Coming soon)
• Choose any HTML element to serve as the parent.
• Animated movement of items.
• Support for both desktop and mobile devices.
• And more...

How to set up

1. Install the RMN.Blazor.DragDrop NuGet package in your project.

2. Add the component namespace to your _Imports.razor file:

@using RMN.Blazor.DragDrop

3. Add SortableJS:

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

Parameters and Events

Name	Type	Default	Description
Items	List<TItem>	[ ]	List of items.
OrderPropertyName	String	""	Item's order property to update after reordering the list.
RootElement	String	"div"	Element that will serve as the parent.
Id	String	Guid	Id for the parent element.
Class	String	""	CSS classes for the parent element.
Style	String	""	Inline styles for the parent element.
DragHandleClass	String	""	CSS class for the drag handle.
UndraggableItemClass	String	""	CSS class for undraggable items.
AllowReorder	Boolean