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

• 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.
• Use a drag handle to drag items only by the handle.
• Fully customizable item template.
• Animated movement of items.
• Support for both desktop and mobile devices.
• And more...

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>

OnUpdate: The method to be called after reordering the list.

<DragDropList Items="Items" Context="item">

    <p>@item.Name</p>

</DragDropList>

<DragDropList Items="Items"
              RootElement="ul"
              DragHandleClass="drag-handle"
              Context="item"
              OnUpdate="OnListUpdate">

    <li>
        <i class="fa-solid fa-grip-vertical drag-handle"></i>
        <span>@item.Name</span>
    </li>

</DragDropList>

<DragDropList Items="Items.OrderBy(x => x.Order).ToList()"
              OrderPropertyName="Order"
              RootElement="tbody"
              UndraggableItemClass="undraggable-item"
              Context="item"
              OnUpdate="OnListUpdate">

    <tr class="@(item.Disabled ? "undraggable-item" : null)">
        <td>@item.Name</td>
    </tr>

</DragDropList>

For updating the order property of your items after reordering the list, you have 2 options:

1. Specify the order property name as shown in the example above.

2. Update manually:

public async Task OnListUpdate() 
{
    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.