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

   <Sortable></Sortable>

2. Set the HTML content of the sortable:

   <Sortable>
     <div>First Item</div>
     <div>Second Item</div>
     <div>Third Item</div>
   </Sortable>

   

   Sortable Mode

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

   <Sortable Mode="Orientation.Horizontal">
       <div>2</div>
       <div>+</div>
       <div>5</div>
       <div>=</div>
       <div>3</div>
   </Sortable>

   

   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"
     HandlePosition="SortableHandlePosition.Bottom">
       <div>2</div>
       <div>+</div>
       <div>5</div>
       <div>=</div>
       <div>3</div>
   </Sortable>

   

   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">
     <ul>
         <li>First Item</li>
         <li>Second Item</li>
         <li>Third Item</li>
     </ul>
   </Sortable>

   

   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: