# Drag & Drop

> `<wr-sortable-list>` wraps CDK's `cdkDropList` + `cdkDrag` with a signal-based two-way `[(items)]` binding. Includes the `[wrDragHandle]` helper and themed `.cdk-drag-preview` / `.cdk-drag-placeholder` defaults. Touch-ready: a default touch start-delay lets a quick swipe scroll the list while a hold begins a drag.

Source: https://ngwr.dev/reference/components/drag-drop  
Kind: Component

## Import

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

## Basic — drag the row

```angular-html
<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>
```

## With drag handle

```angular-html
<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>
```

## API

| 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` | `—` |