Blazor - Get Started with Sortable

Blazor - Get Started with Smart.Sortable

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup Basic Sortable

Smart.Sortable is container component, which enables you to drag & drop its children elements.

  1. Add the Sortable component to the Pages/Index.razor file
  2. Set the HTML content of the sortable:
      <div>First Item</div>
      <div>Second Item</div>
      <div>Third Item</div>
    Basic Sortable

    Sortable Mode

    Smart.Sortable can also be set to Horizontal Mode by usiing the Mode property:

    <Sortable Mode="Orientation.Horizontal">
    Sortable horizontal

    Drag Mode

    By default, inner element of the Sortable can be dragged by dragging the element itself.
    DragMode can also be set to Handle. Additional properties such as HandleVisibility and HandlePosition can be used to further customize the handle

    <Sortable Mode="Orientation.Horizontal" DragMode="SortableDragMode.Handle" HandleVisibility="SortableHandleVisibility.Visible"
    Sortable drag mode

    Sortable Items

    If the items are not direct children of the Sortable container, then they can be turned drggable by using the Items property:

    <Sortable Items="li">
          <li>First Item</li>
          <li>Second Item</li>
          <li>Third Item</li>
    Sortable items

    Sortable Events

    Smart.Sortable provides a OnDragEnd Event that can help you expand the component's functionality.

    • OnDragEnd - riggered when sortable items have been reordered.
      Event Details: N/A

    The demo below increments a counter after each reordering:

    Sortable events