Drag & Drop

import { WrSortableList, WrDragHandle, type WrSortableReorderEvent } from 'ngwr/drag-drop';

<wr-sortable-list [(items)]="rows" (reorder)="onReorder($event)">
  <ng-template let-row let-i="index">
    <div class="row">{{ i + 1 }}. {{ row.label }}</div>
  </ng-template>
</wr-sortable-list>

#1Design the empty state

#2Wire the new sidebar config

#3Run lighthouse on the homepage

#4Write release notes

#5Bump the version

Press Space to pick this item up, then use the arrow keys to move it. Press Space again to drop it, or Escape to put it back.

Last reorder: —

<wr-sortable-list [(items)]="rows">
  <ng-template let-row>
    <div class="row">
      <span wrDragHandle class="grip">≡</span>
      <span>{{ row.label }}</span>
    </div>
  </ng-template>
</wr-sortable-list>

≡Design the empty state

≡Wire the new sidebar config

≡Run lighthouse on the homepage

≡Write release notes

≡Bump the version

Press Space to pick this item up, then use the arrow keys to move it. Press Space again to drop it, or Escape to put it back.

Only the ≡ handle starts a drag — clicking the row text does nothing.

Name	Description	Type	Default
`items`required	Two-way bound items array. Emits the reordered array after drop.	`T[]`	—
`orientation`	Layout direction. Drives CDK's `cdkDropListOrientation`.	`'vertical' \| 'horizontal'`	`'vertical'`
`disabled`	Disable dragging.	`boolean`	`false`
`lockAxis`	Restrict drag movement to one axis.	`'x' \| 'y'`	`—`
`dragStartDelay`	Delay (ms) before a drag begins. The touch delay lets a quick swipe scroll the list while a brief hold starts the drag; mouse stays instant.	`number \| { touch: number; mouse: number }`	`{ touch: 150, mouse: 0 }`
`trackBy`	`trackBy` for the inner `@for`.	`(index: number, item: T) => unknown`	`identity`
`(reorder)`	Fires after a successful reorder with the new array + indices.	`WrSortableReorderEvent<T>`	`—`
`[wrDragHandle]`	Restrict drag start to a handle element. Composes CDK's `cdkDragHandle`.	`directive`	`—`

Import

Basic — drag the row

With drag handle

API