BlazorSortable 3.1.0

BlazorSortable

A Blazor component that wraps the SortableJS library, designed for creating interactive sortable lists with drag-and-drop support. Inspired by BlazorSortable and represents an improved and extended implementation.

Installation

Via dotnet CLI

dotnet add package BlazorSortable

Via PackageReference

Add to your .csproj file:

<ItemGroup>
  <PackageReference Include="BlazorSortable" Version="3.*" />
</ItemGroup>

Setup

1. Add the SortableJS library to:

   • wwwroot/index.html (for Blazor WebAssembly)
   • Components/App.razor (for Blazor Web App)
   • Pages/_Host.cshtml (for Blazor Server)

   Using one of the following methods:

   1. Via CDN:

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

   2. Locally:

   <script src="lib/sortable/dist/js/Sortable.min.js"></script>
   

   For local installation:

   1. Download the latest version of SortableJS from GitHub
   2. Create the folder structure in wwwroot: lib/sortable/dist/js/
   3. Place the Sortable.min.js file in the created folder
   4. Ensure the path in the script tag matches the file location

2. (Optional) Add base styles to the same file where you added the script:

<link rel="stylesheet" href="_content/BlazorSortable/css/blazor-sortable.css" />

3. Add services in Program.cs:

using BlazorSortable;

// ...

builder.Services.AddSortableServices();

4. Add the using directive in _Imports.razor:

@using BlazorSortable

Usage Examples

SortableList

With a component

<SortableList Items="Persons"
              Class="my-sortable-list"
              Group="Group1">
    <PersonComponent Person="context" />
</SortableList>

<SortableList TItem="Person"
              Items="Persons"
              Class="my-sortable-list"
              Group="Group1"
              Context="person">
    <div class="person-card">
        <h4>@person.Name</h4>
        <p>@person.Email</p>
        <span class="badge">@person.Department</span>
    </div>
</SortableList>

SortableDropZone

<SortableDropZone Class="my-sortable-drop-zone"
                  Group="Group1"
                  OnDrop="OnDrop" />

Events

Events use Action<T> instead of EventCallback<T>. Reason: EventCallback.InvokeAsync automatically triggers StateHasChanged() in the parent component. For this component, this causes conflicts between DOM and data model.

All events receive a SortableEventArgs<TItem> parameter containing information about the operation.

SortableEventArgs

The SortableEventArgs<TItem> class provides information about sorting operations:

SortableTransferContext

The SortableTransferContext<TItem> class represents the context of transferring an item between sortable components:

ISortable

The ISortable interface provides information about a sortable component:

Order & Notes

• Order of events when dragging between lists:
  1. OnAdd is triggered first.
  2. OnRemove is triggered after.
• During OnAdd, the item is still present in the source list.

Component Parameters

SortableList

SortableDropZone

PullMode

PutMode