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, and this page is available as Markdown at https://gultyayev.github.io/ngx-virtual-dnd/guide/start/introduction.md.
ngx-virtual-dnd
v3.6.2

    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 itemsOpen in new tab

    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 for details. The approach was inspired by react-virtualized-dnd.

    Features

    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.

    Next steps