Skip to main content

Drag Drop Zone

Overview​

The DragDropZoneDirective makes an element both draggable and droppable, allowing it to be moved and to act as a valid drop target for other items.

It extends the DragDropZone base class to combine drag-and-drop logic in a single directive. Multiple instances can be used on the same page, each managing independent drag-drop interactions.

Import​

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

Selector​

ngxDragDropZone

API Reference​

Type Parameters​

NameDescription
T extends DndTreeItemDefines the type of draggable and droppable item handled by the directive.

Inputs​

NameDefaultDescription
ngxDragDropZone: T-The draggable and droppable item instance.
allowedItems: Array<string | number>-Restricts which item types can be dropped onto this element.
customDragHandleElement: HTMLElement-Custom element to use as the drag handle instead of the host container.
previewComponent: Type<PreviewComponent<T>>-Component class used to render a custom drag preview for this item.
useBrowserPreview: booleanfalseIf true, the directive uses the browser's native drag preview instead of a custom one.

Lifecycle Hooks​

These optional protected methods allow subclasses to attach logic to key lifecycle stages without overriding Angular hooks directly:

HookCalled During
protected onInit()ngOnInit
protected afterViewInit()ngAfterViewInit
protected onDestroy()ngOnDestroy

Example​

<div
  [ngxDragDropZone]="myItem"
  [allowedItems]="['text', 'image']"
>
  Draggable and droppable item
</div>

See Also​