Drop Zone
Overview
The DropZoneDirective makes an element into a drop target that can accept draggable tree items.
Multiple instances can be used on the same page, each managing independent drop targets.
It manages drag-over, drop, and cleanup behaviors using the underlying DropZone base class.
Import
import { DndModule } from 'ngx-builder-dnd';Selector
ngxDropZone
API Reference
Type Parameters
| Name | Description |
|---|---|
T extends DndTreeItem | The item type managed by this drop zone. Enables strong typing. |
Inputs
| Name | Default | Description |
|---|---|---|
ngxDropZone: T | - | The tree item associated with this drop zone. |
allowedItems: Array<string | number> | - | Restricts which item types can be dropped into this zone. |
Lifecycle Hooks
These optional protected methods allow subclasses to attach logic to key lifecycle stages without overriding Angular hooks directly:
| Hook | Called During |
|---|---|
protected onInit() | ngOnInit |
protected afterViewInit() | ngAfterViewInit |
protected onDestroy() | ngOnDestroy |
Example
<div [ngxDropZone]="myItem" [allowedItems]="['text', 'image']">
Drop items here
</div>
See Also
- Base Drop Zone - Provides shared logic for drop-zone implementations.
- Drop Zone Directive - Marks an element as a drop zone for items.