Base Drop Zone

tip

Before extending BaseDropZone, 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

The BaseDropZone class is the foundation for DragDropZoneDirective and DropZoneDirective. It implements the common drag and drop logic for items inside the builder, including edge detection, drop state management, and allowed items filtering.

Import

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

Selector

BaseDropZone

API Reference

Class Signature

export abstract class BaseDropZone<T extends DndTreeItem> {
  abstract element: HTMLElement;
  abstract item: T;
  abstract allowedItems: Array<string | number> | undefined;
}

Type Parameters

Name	Description
`T: DndTreeItem`	The type of the draggable tree item managed by this drop zone.

Protected Properties

Name	Type	Description
`stateManager`	`DndStateManager`	Manages the local DnD state for this drop zone (drop target, instruction, closest edge). Each `BaseDropZone` instance owns its own state manager.

Observables

Name	Description
`dropTarget$: Observable<DragState>`	Emits the current drop state of the element: `'idle'`.
`instruction$: Observable<Instruction \| null>`	Emits the current drag Instruction, or `null` when no instruction exists.
`isDragging$: Observable<boolean>`	Emits whether a drag operation is currently active on this item.
`closestEdge$: Observable<Edge \| null>`	Emits the closest edge where the draggable is hovering over the item.

Protected Methods

Name	Parameters	Returns	Description
`init`	-	`void`	Adds the default CSS class to the element.
`getDropEdges`	args: ElementDropTargetEventBasePayload	`Edge[]`	Returns the edges this drop zone accepts. Called repeatedly during drag. Default: `['top', 'bottom']`.
`getDropOperations`	args: ElementDropTargetEventBasePayload	`DropOperations`	Returns the drop operations available for this zone. Called continuously during drag. Default: `reorder-before` and `reorder-after`.
`shouldHandleDrag`	source: ElementDragPayload	`boolean`	Determines whether the zone should respond to the current drag item. Evaluated on every drag movement.
`canDrop`	source: ElementDragPayload	`boolean`	Checks if the dragged item is permitted to be dropped on this zone, based on `allowedItems` and item type. Called repeatedly during hover, and returns `false` if `shouldHandleDrag` fails.
`setupDropTarget`	-	`ReturnType<typeof dropTargetForElements>`	Configures Pragmatic DnD drop target behavior and registers callbacks.
`combineDragDrop`	-	`abstract ReturnType<typeof combine>`	Must be implemented by subclasses to merge drag + drop behavior.

Example

import { BaseDropZone, DndTreeItem } from 'ngx-builder-dnd';
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';

class MyCustomDropZone extends BaseDropZone<DndTreeItem> {
  element: HTMLElement;
  item: DndTreeItem;
  allowedItems = ['widget', 'container'];

  protected shouldHandleDrag(): boolean {
    return true;
  }

  protected combineDragDrop(): ReturnType<typeof combine> {
    // Implement the combine logic with observables
  }
}

Overview​

Import​

Selector​

API Reference​

Class Signature​

Type Parameters​

Protected Properties​

Observables​

Protected Methods​

Example​

See Also​