Skip to main content

Drop List

Overview​

The DropListDirective directive turns any container element into a valid drop zone where draggable items can be placed. It powers the drag-and-drop experience by managing positioning, insertion, and event handling.

You can also wrap DropListDirective in your own Angular component to create custom drop zone implementations tailored to your app's needs.

Import​

import { DndModule } from 'ngx-builder-dnd';

Selector​

ngxDropList

API Reference​

Type Parameters​

NameDescription
T extends TreeItem<any>Defines the type of items managed by the drop list.

Inputs​

NameDefaultDescription
list: T[][]The data model representing the draggable items inside the drop list.
createItem: (args: ElementDropTargetEventBasePayload) => T-A factory function used to create a new item when one is dropped.
allowedItems: Array<string | number>-Defines which item types are allowed in this drop list.
dropIndicatorHostRef: HTMLElement-Host element for rendering the drop indicator.
operations: DropOperations{ 'reorder-after': 'available' }Configures which drag-and-drop operations are enabled in this zone.
allowedEdges: Edge[]['top', 'bottom']Allowed edges used to determine the closest drop position. Called repeatedly during drag.

Observables​

NameDescription
dropTarget$Emits the current drag state: 'idle' or 'is-dragging-over'.
instruction$Emits the current drag Instruction, or null when no instruction exists.
closestEdge$Emits the closest edge (top / bottom) during drag-over.

Example​

<div
  ngxDropList
  [list]="list"
  [createItem]="createItem"
  [allowedItems]="allowedItems">
  <!-- List content -->
</div>

See Also​