> 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.

# Introduction

ngx-virtual-dnd is a drag-and-drop library for Angular, built for **virtually scrolled lists**. It renders only the rows in view plus a small buffer, so the DOM stays small however long the list grows. Drag and drop still works across the whole list.


Live exampleSortable list with 1,000 items[Open in new tab](/ngx-virtual-dnd/demo/examples/quick-start/)

Try it: drag a row, or focus one with Tab
, press Space
 and move it with the arrow keys. The list holds 1,000 tasks, but only about a dozen rows are in the DOM at any time.
## Why a separate library

Most drag-and-drop libraries work out the drop position by measuring sibling elements in the DOM. With virtual scrolling most siblings do not exist, so those libraries drop items in the wrong place, or cannot scroll to a target that has not been rendered yet.

ngx-virtual-dnd works from geometry instead. At drag start it records the position and size of each drop target. While you drag, it compares the pointer with those recorded bounds and calculates the drop index from the scroll offset and row heights. See [How it works](https://gultyayev.github.io/ngx-virtual-dnd/guide/more/how-it-works.md) for details. The approach was inspired by [react-virtualized-dnd](https://github.com/forecast-it/react-virtualized-dnd).

## Features

- **Virtual scrolling** with fixed or [dynamic item heights](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/dynamic-heights.md)
- **[Multiple lists](https://gultyayev.github.io/ngx-virtual-dnd/guide/essentials/multiple-lists.md)** that exchange items within a group
- **[Page-level scrolling](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/page-scroll.md)**, including Ionic `ion-content`
- **[Auto-scroll](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/auto-scroll.md)** near container edges, with configurable speed and threshold
- **[Drag handles, delays, axis locking and constraints](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/drag-behavior.md)**
- **[Custom previews and placeholders](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/preview-and-placeholder.md)**
- **[Shift animations and haptics](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/animations.md)**, opt-in
- **[Keyboard and screen reader support](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/accessibility.md)**
- **Angular 21+:** standalone components, signals, `OnPush`-friendly

## When to use it

Use ngx-virtual-dnd for **vertical lists**, such as sortable lists and kanban-style boards, especially when a list can grow to hundreds or thousands of items.

It is not a general-purpose drag-and-drop toolkit. Freeform canvases, grids with 2D reordering and dragging files from the desktop are out of scope. See [Known limitations](https://gultyayev.github.io/ngx-virtual-dnd/guide/more/limitations.md).

## Next steps

- [Install the package](https://gultyayev.github.io/ngx-virtual-dnd/guide/start/installation.md)
- [Build a sortable list](https://gultyayev.github.io/ngx-virtual-dnd/guide/start/quick-start.md) in a few minutes
- Moving from `@angular/cdk/drag-drop`? See [Coming from Angular CDK](https://gultyayev.github.io/ngx-virtual-dnd/guide/start/coming-from-cdk.md)
- Using an AI coding assistant? [Install the agent skill](https://gultyayev.github.io/ngx-virtual-dnd/guide/more/ai-assistants.md)