# ngx-virtual-dnd

> Angular drag and drop for virtual scrolling: sortable lists that stay fast with thousands of items.

## Guide

- [Introduction](https://gultyayev.github.io/ngx-virtual-dnd/guide/start/introduction.md): What ngx-virtual-dnd is, the problem it solves, and when to use it.
- [Installation](https://gultyayev.github.io/ngx-virtual-dnd/guide/start/installation.md): Install ngx-virtual-dnd and check the requirements.
- [Quick start](https://gultyayev.github.io/ngx-virtual-dnd/guide/start/quick-start.md): Build a sortable, virtually scrolled list with VirtualSortableListComponent.
- [Coming from Angular CDK](https://gultyayev.github.io/ngx-virtual-dnd/guide/start/coming-from-cdk.md): How the Angular CDK drag-and-drop API maps to ngx-virtual-dnd, and what works differently.
- [Core concepts](https://gultyayev.github.io/ngx-virtual-dnd/guide/essentials/core-concepts.md): Droppables, draggables, groups, the preview and placeholder, and the rules that keep them working.
- [Handling drops](https://gultyayev.github.io/ngx-virtual-dnd/guide/essentials/handling-drops.md): The drop event, the helper functions for signals and immutable state, and drag lifecycle events.
- [Multiple lists](https://gultyayev.github.io/ngx-virtual-dnd/guide/essentials/multiple-lists.md): Move items between lists, build a board, and control which lists accept items.
- [Choosing a component](https://gultyayev.github.io/ngx-virtual-dnd/guide/essentials/choosing-a-component.md): Pick between the sortable list, the low-level scroller, page-level scrolling and the virtual viewport.
- [Dynamic item heights](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/dynamic-heights.md): Virtual lists with rows of different heights, measured automatically.
- [Page-level scrolling](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/page-scroll.md): Virtual lists that scroll with the page or an Ionic ion-content, with headers and footers.
- [Drag behavior](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/drag-behavior.md): Drag handles, interactive children, threshold and delay, axis locking, container constraints and disabling.
- [Auto-scroll](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/auto-scroll.md): Edge scrolling while dragging, and how to tune or disable it.
- [Preview and placeholder](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/preview-and-placeholder.md): Customize the element that follows the pointer and the drop-position placeholder.
- [Animations and haptics](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/animations.md): Slide displaced rows into place while dragging, glide the dropped item into its slot, and react to every placeholder move.
- [Styling](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/styling.md): The CSS classes the library adds, with common recipes.
- [Accessibility](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/accessibility.md): Keyboard dragging, focus handling, screen reader instructions and announcements.
- [Performance](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/performance.md): Row recycling, overscan, the drag preview and the other settings that affect speed with large lists.
- [FAQ](https://gultyayev.github.io/ngx-virtual-dnd/guide/more/faq.md): Angular versions, zoneless apps, server-side rendering, lists in different components, and testing drag and drop.
- [Troubleshooting](https://gultyayev.github.io/ngx-virtual-dnd/guide/more/troubleshooting.md): Common symptoms and their causes.
- [Known limitations](https://gultyayev.github.io/ngx-virtual-dnd/guide/more/limitations.md): What ngx-virtual-dnd does not do, and the browser and Angular behavior it cannot work around.
- [How it works](https://gultyayev.github.io/ngx-virtual-dnd/guide/more/how-it-works.md)
- [AI assistants](https://gultyayev.github.io/ngx-virtual-dnd/guide/more/ai-assistants.md): Give coding assistants accurate ngx-virtual-dnd knowledge with the agent skill and llms.txt.

## API

- [API overview](https://gultyayev.github.io/ngx-virtual-dnd/api/overview.md): Every export of ngx-virtual-dnd on one page, grouped by what you use it for.
- [Components](https://gultyayev.github.io/ngx-virtual-dnd/api/components.md): Inputs, outputs and methods of every ngx-virtual-dnd component.
- [Directives](https://gultyayev.github.io/ngx-virtual-dnd/api/directives.md): Inputs and outputs of every ngx-virtual-dnd directive.
- [Events](https://gultyayev.github.io/ngx-virtual-dnd/api/events.md): DragStartEvent, DropEvent, DragEndEvent and PlaceholderMoveEvent.
- [Utilities](https://gultyayev.github.io/ngx-virtual-dnd/api/utilities.md): Helper functions for applying drops to signals and immutable state.
- [Services](https://gultyayev.github.io/ngx-virtual-dnd/api/services.md): DragStateService and the lower-level services exported for advanced use.
- [Types, tokens and strategies](https://gultyayev.github.io/ngx-virtual-dnd/api/types.md): Configuration types, template contexts, virtual scroll strategies, injection tokens and constants.

## Changelog

- [Changelog](https://gultyayev.github.io/ngx-virtual-dnd/changelog.md): Release notes for every ngx-virtual-dnd version.