Drop Zone

tip

Before using or extending DropZone, make sure you're familiar with the concepts of Pragmatic Drag and Drop. This class builds directly on top of Atlassian's drag-and-drop primitives and is designed to integrate with them.

Overview

DropZone is an abstract class that extends BaseDropZone and provides a foundation for drop-target functionality within drag-and-drop lists.

DropZoneDirective extend this class internally, so most developers interact with it indirectly through the higher-level directives and components.

Import

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

Selector

DropZone

API Reference

Class Signature

export abstract class DropZone<T extends DndTreeItem> extends BaseDropZone<T> {
  abstract override allowedItems: Array<string | number> | undefined;

  protected override getDropEdges(): Edge[];
  protected override getDropOperations(): DropOperations;
  protected combineDragDrop(): ReturnType<typeof combine>;
  protected shouldHandleDrag(): boolean;
}

Observables

Name	Description
`dropTarget$: Observable<DragState>`	Emits the current drag state of the drop target.
`isDragging$: Observable<boolean>`	Emits whether an item is currently being dragged.
`closestEdge$: Observable<Edge \| null>`	Emits the closest edge during a drag-over event.

Behavior Overrides

DropZone overrides some of the default behaviors defined in BaseDropZone. These changes tailor the class for drop-only tree items:

Method	Custom Behavior
`getDropEdges()`	Always returns `['top']`, limiting drop interactions to the top edge.
`getDropOperations()`	Returns `{ combine: 'available' }`, enabling only combine operations.
`shouldHandleDrag()`	Drag is handled only if the item has no children.
`combineDragDrop()`	Implements the required setup by combining the configured drop target.

Example

import { DropZone, DndTreeItem } from 'ngx-builder-dnd';

class MyDropZone extends DropZone<DndTreeItem> {
  override allowedItems = ['text', 'image'];

  // Default drag and drop behavior is inherited
}

Extending `DropZone` in a Directive

A compact example showing how to create an Angular directive that extends DropZone. This demonstrates the @Directive decorator + provider pattern (so DI consumers can inject the base type) and the minimal members required by the abstract class.

import { Directive, ElementRef, forwardRef, Input, Renderer2, ViewContainerRef } from '@angular/core';
import { DropZone, DndTreeItem } from 'ngx-builder-dnd';

/**
 * Example directive that makes an element both draggable and a drop target
 * by extending the library's DropZone.
 */
@Directive({
  selector: '[ngxMyDropZone]',
  providers: [
    // Expose this directive as the base DropZone token so other DI consumers can ask for DropZone
    {
      provide: DropZone,
      useExisting: forwardRef(() => MyDropZoneDirective),
    },
  ],
})
export class MyDropZoneDirective extends DropZone<DndTreeItem> {
  /** The item associated with this zone (bound via the directive input). */
  @Input('ngxMyDropZone') item!: DndTreeItem;

  constructor(
    protected el: ElementRef<HTMLElement>,
    protected viewContainerRef: ViewContainerRef,
    protected renderer: Renderer2,
  ) {
    super(el, viewContainerRef, renderer);
  }

  // You may override getDropEdges, getDropOperations, shouldHandleDrag, etc.
  // Only override when you need to change behavior — otherwise inherit defaults.
}

Overview​

Import​

Selector​

API Reference​

Class Signature​

Observables​

Behavior Overrides​

Example​

Extending DropZone in a Directive​

See Also​