Drag Drop Zone

tip

Before using or extending DragDropZone, 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

DragDropZone is an abstract class that extends BaseDropZone and provides a foundation for zones that are both draggable and drop targets.

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

Import

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

Selector

DragDropZone

API Reference

Class Signature

export abstract class DragDropZone<T extends DndTreeItem> extends BaseDropZone<T> {
  abstract containerRef: ViewContainerRef;
  abstract customDragHandleElement: HTMLElement;
  abstract override allowedItems: Array<string | number> | undefined;
  abstract useBrowserPreview: boolean;
  abstract previewComponent?: Type<PreviewComponent<T>>;
}

Observables

Name	Description
`dropTarget$: Observable<DragState>`	Emits the current drag state for the drop target.
`isDragging$: Observable<boolean>`	Emits `true` when the item is being dragged.
`closestEdge$: Observable<Edge \| null>`	Emits the closest edge during dragging, or `null` otherwise.

Overridden Methods

Name	Parameters	Returns	Description
`setupDraggable`	`handle?: HTMLElement`	`ReturnType<typeof draggable>`	Initializes the draggable behavior for this drop zone.

Behavior Overrides

DragDropZone customizes several behaviors from BaseDropZone in order to support both dragging and dropping:

Method	Custom Behavior
`getDropEdges()`	Allows dropping on both `top` and `bottom` edges.
`getDropOperations()`	Enables `reorder-before` and `reorder-after` operations.
`shouldHandleDrag()`	Always returns `true`, allowing all items to initiate drag behavior.
`combineDragDrop()`	Combines the configured draggable and drop-target behaviors into a unified stream.

Example

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

class MyDragDropZone extends DragDropZone<DndTreeItem> {
  containerRef = myViewContainerRef;
  customDragHandleElement = myHandleEl;
  allowedItems = ['text', 'image'];
  useBrowserPreview = false;

  combineDragDrop() {
    return super.combineDragDrop(this.customDragHandleElement);
  }
}

Extending `DragDropZone` in a Directive

A compact example showing how to create an Angular directive that extends DragDropZone. 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 { DragDropZone, DndTreeItem } from 'ngx-builder-dnd';

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

Overridden Methods​

Behavior Overrides​

Example​

Extending DragDropZone in a Directive​

See Also​