Drag and drop list component for Blazor.
$ dotnet add package RMN.Blazor.DragDropThis component provides user-friendly drag and drop functionality for Blazor applications.
Install the RMN.Blazor.DragDrop NuGet package in your project.
Add the component namespace to your _Imports.razor file:
@using RMN.Blazor.DragDrop
SortableJS:<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
| 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 |
| true |
| Allow reordering the list. |
| AllowDragging | Boolean | true | Allow dragging of items. |
| Context | String | context | Parameter name for the list items. |
| OnUpdate | EventCallback | The method to be called after reordering the list. |
<DragDropList Items="Items" Context="item">
<p>@item.Name</p>
</DragDropList>
<DragDropList Items="Items"
OrderPropertyName="Order"
RootElement="ul"
DragHandleClass="drag-handle"
UndraggableItemClass="undraggable-item"
Context="item"
OnUpdate="OnListUpdateAsync">
<li class="@(item.Disabled ? "undraggable-item" : null)>
<i class="drag-handle icon-drag-handle"></i>
<span>@item.Name</span>
</li>
</DragDropList>
For updating the order property of your items after reordering the list, you can either specify the OrderPropertyName as shown in the example above, or update manually:
public async Task OnListUpdateAsync()
{
Items.ForEach(x => x.Order = Items.IndexOf(x));
// Saving to database or something else
}
For styling the item that is being dragged, use the class selector .dragging-item.
Project is licensed under the MIT license.