ngx-virtual-dnd

Angular drag and drop for virtual scrolling. Sortable lists and boards that stay fast with thousands of items: only the visible rows are rendered, and drag and drop still works across all of them.

Documentation · Live demo · Changelog

Features

• Virtual scrolling with fixed or dynamic (auto-measured) item heights
• Drag between multiple lists, with edge auto-scroll
• Page-level scrolling, including Ionic ion-content
• Drag handles, delays, axis locking, container constraints, custom previews
• Opt-in shift and drop animations, plus a per-step event for haptics
• Keyboard dragging and touch support
• Angular 21 and 22: standalone components and signals

Installation

npm install ngx-virtual-dnd

Example

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import {
  DragPreviewComponent,
  DraggableDirective,
  DropEvent,
  DroppableGroupDirective,
  reorderItems,
  VirtualSortableListComponent,
} from 'ngx-virtual-dnd';

interface Task {
  id: string;
  title: string;
}

@Component({
  selector: 'app-tasks',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    VirtualSortableListComponent,
    DroppableGroupDirective,
    DraggableDirective,
    DragPreviewComponent,
  ],
  template: `
    <div vdndGroup="tasks">
      <ng-template #taskTpl let-task>
        <div class="row" [vdndDraggable]="task.id">{{ task.title }}</div>
      </ng-template>

      <vdnd-sortable-list
        droppableId="backlog"
        [items]="tasks()"
        [itemHeight]="48"
        [containerHeight]="400"
        [itemIdFn]="taskId"
        [itemTemplate]="taskTpl"
        (drop)="onDrop($event)"
      />
    </div>

    <vdnd-drag-preview />
  `,
})
export class TasksComponent {
  readonly tasks = signal<Task[]>(
    Array.from({ length: 1000 }, (_, i) => ({ id: `task-${i + 1}`, title: `Task ${i + 1}` })),
  );

  readonly taskId = (task: Task): string => task.id;

  onDrop(event: DropEvent): void {
    reorderItems(event, this.tasks);
  }
}

Every draggable and droppable needs a group (here from vdndGroup), even for a single list, and the item template must be declared inside it. The Quick start explains each part, and Core concepts lists the rules that keep a setup working.

Documentation

• Getting started: introduction, installation, quick start
• Guides: multiple lists, dynamic heights, page scroll, drag behavior, styling, accessibility, performance
• Coming from Angular CDK: how the CDK drag-and-drop API maps to this one
• FAQ: SSR, zoneless apps, testing and more
• API reference: components, directives, events, utilities, services, types

AI agent skills

Install a skill that teaches AI coding assistants how to integrate this library:

npx skills add gultyayev/ngx-virtual-dnd

It works with Claude Code, Cursor, Windsurf, GitHub Copilot and 40+ other agents. The docs are also published as llms.txt.

Contributing

See CONTRIBUTING.md to run the demo, the docs and the tests locally.

License

MIT