Simple List Drag and Drop

Reorder items in one list or move them between compatible lists with ngbDndList and ngbDndItem. Use dndDropped to update application state or persist the new order.

Flat lists with drag to reorder and cross-list move (e.g., Fruits ⇄ Veggies).
Tree / nested lists (e.g., collapsible panels) with nested children using dndChildrenKey="children".
Palette → Canvas flows (optional): mark a list as a palette and move or clone items into the canvas.
Angular-native Form Builder workflows built on the same primitives used for simple list reordering.
Accessibility helpers (live announce hooks, bidi support) aligned with the demo scaffold.

Use it for sortable lists, kanban/lane moves, Angular-native Form Builder experiences, or any nested structures that need drag-and-drop.

Reorder and move items between lists

Start with the simplest use case: drag items between flat lists or reorder within a list. These are the same primitives used by the Angular-native Form Builder example.

Keyboard support is built in for same-list reorder: focus an item, press Space, use ArrowUp or ArrowDown, press Enter to confirm, or Escape to cancel.

A) Reorder

Apple
Banana
Cherry
Orange

B) Cross-list: Fruits ⇄ Veggies

Apple
Banana

Tomato
Spinach

How this example works

Bind the backing array on the container via [ngbDndList].
Make items draggable with [ngbDndItem] and provide [dndIndex].
Lists that can exchange items share the same dndGroup.
Focused items can be reordered within their current list by keyboard using Space, arrow keys, Enter, and Escape.
Reuse the same directives later for advanced builder-style workflows such as Angular-native Form Builder.

Live data

Fruits: [
  "Apple",
  "Banana"
]
Veggies: [
  "Tomato",
  "Spinach"
]