Sortable

On a phone or tablet, long-press an item to pick it up, then drag it into place. A quick swipe still scrolls.

Basic

Simple sorting of list
Sorting animation
Support sortable handle
Support gap in sorting list
Support placeholder
Support animation only when dragging
 Support multiple lists
Support draggable grids

Apply the shSortable directive to a list, grid, or tree container to enable interactive drag-and-drop reordering.

It works the same way with a mouse, a finger and the keyboard. A mouse drag starts straight away. On touch, hold an item still for a moment to pick it up; a touch that moves first scrolls the page as usual. With a [sort-handle] focused, the arrow keys and Home/End move the item.

Basic Usage

<sh-list [shSortable]="manager">
  @for (item of items(); track $index) {
    <div item [draggable]="true">
      {{ item.name }}
    </div>
  }
</sh-list>