> For AI agents: the complete documentation index is available at https://gultyayev.github.io/ngx-virtual-dnd/llms.txt, the full documentation bundle is available at https://gultyayev.github.io/ngx-virtual-dnd/llms-full.txt.

# Events

| Output              | Event                  | Emitted by                                                                        |
| ------------------- | ---------------------- | --------------------------------------------------------------------------------- |
| `(dragStart)`       | `DragStartEvent`       | `vdndDraggable`                                                                   |
| `(dragEnd)`         | `DragEndEvent`         | `vdndDraggable`, after every drag, dropped or not                                 |
| `(drop)`            | `DropEvent`            | `vdndDroppable` and `<vdnd-sortable-list>`, on the destination only               |
| `(placeholderMove)` | `PlaceholderMoveEvent` | `vdndDroppable` and `<vdnd-sortable-list>`, each time the placeholder moves in it |

On release, `(dragEnd)` fires first, then `(drop)` on the destination, both before the next render.

## DragStartEvent

```ts
interface DragStartEvent {
  draggableId: string;
  droppableId: string; // the list the drag started in
  data?: unknown; // vdndDraggableData
  position: CursorPosition;
  sourceIndex: number;
}
```

## DropEvent

```ts
interface DropEvent {
  source: DropSource;
  destination: DropDestination;
}

interface DropSource {
  draggableId: string;
  droppableId: string;
  index: number;
  data?: unknown; // vdndDraggableData
}

interface DropDestination {
  droppableId: string;
  placeholderId: string; // deprecated: always END_OF_LIST; use index for the position
  index: number; // final insertion index, after removal from the source
  data?: unknown; // vdndDroppableData / droppableData
}
```

Apply the move with [`moveItem()`, `reorderItems()` or `applyMove()`](https://gultyayev.github.io/ngx-virtual-dnd/api/utilities.md).

## DragEndEvent

```ts
interface DragEndEvent {
  draggableId: string;
  droppableId: string; // the source list
  cancelled: boolean;
  data?: unknown;
  sourceIndex: number;
  destinationIndex: number | null;
}
```

`destinationIndex` is `null` when nothing was dropped. That happens when:

- the drag was **cancelled**, by any of:
  - <kbd>
      Escape
    </kbd>
  - <kbd>Tab</kbd> during a keyboard drag
  - the window losing focus during a pointer drag
  - the page being hidden during a pointer drag (the release would never reach the page)
  - the system cancelling a touch
  - the dragged draggable being destroyed (for example its item removed from the list mid-drag)
- the item was released outside every droppable
- the item was released over a disabled droppable

A non-null value means a `drop` event fired on the destination. `cancelled` is `true` only in the first case, so check `destinationIndex === null` to detect "no drop".

## PlaceholderMoveEvent

Added in 3.2.0.

```ts
interface PlaceholderMoveEvent {
  draggableId: string;
  sourceDroppableId: string; // the list the drag started in
  droppableId: string; // the list the placeholder moved within
  previousIndex: number | null; // null when the placeholder just entered this list
  currentIndex: number;
  data?: unknown; // vdndDraggableData
}
```

Emitted each time the placeholder moves within a list, including when it enters the list. It is not emitted for the initial pick-up or when the placeholder leaves. Indexes follow the `DropEvent.destination.index` convention: where the item would land if dropped now. For the first move in the source list, `previousIndex` is the item's original index.

Each event reports one placeholder update. During a fast pointer drag the placeholder can skip rows between updates, so `currentIndex` may differ from `previousIndex` by more than one.

Listening runs change detection: like any Angular template listener, `(placeholderMove)` marks your component and its ancestors for check each time it fires. A list without the listener does not re-render your component on placeholder moves.

Typical uses are [haptic feedback](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/animations.md#placeholder-move-events) and [screen reader announcements](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/accessibility.md#screen-reader-announcements).