Skip to main content

Drag Source

tip

Before using this component, make sure you are familiar with the concepts of Pragmatic Drag and Drop. This component builds directly on top of draggable and dropTargetForElements from Atlassian's library.

Overview​

The DragSourceComponent represents an item that can be dragged and dropped into compatible targets. It is the core building block for enabling drag-and-drop interactions inside the builder.

This component supports:

  • Default or custom rendering template
  • Default or custom drag preview
  • Configurable dragging behavior (browser preview vs custom preview)

Import​

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

Selector​

ngx-drag-source

API Reference​

Type Parameters​

NameDescription
TTypeDefines the type of draggable item that the target accepts.

Inputs​

NameDefaultDescription
dragSource: DragSourceData<TType>-The draggable item data. Usually includes type (identifier) and imageUrl (visual representation).
customTemplate: TemplateRef<{ $implicit: DragSourceData<TType> }-Custom Angular template for rendering the draggable item. Falls back to the default template if not provided.
previewComponent: Type<PreviewComponent<DragSourceData<TType>>>-A custom component used as the drag preview. Defaults to DragPreviewComponent.
useBrowserPreview: boolean | stringfalseWhen true, uses the browser's native drag preview. When false, uses the default or a custom preview component.
operations: DropOperations{ 'reorder-before': 'available', 'reorder-after': 'available' }Controls which drop operations are allowed. Called repeatedly during drag.
allowedEdges: Edge[]['top', 'bottom']Allowed edges used to determine the closest drop position. Called repeatedly during drag.

Examples​

Default Draggable Item​

<ngx-drag-source
  [dragSource]="{ type: 'button', imageUrl: 'url path' }">
</ngx-drag-source>
  • Renders the item with the default template (image inside a span).
  • Uses the default preview component (DragPreviewComponent) when dragging.

Custom Preview Component​

<ngx-drag-source
  [dragSource]="{ type: 'image', imageUrl: 'url path' }"
  [previewComponent]="MyPreviewComponent"
  [useBrowserPreview]="false">
</ngx-drag-source>
  • Renders with the default template, but shows MyPreviewComponent while dragging.
  • Data from dragSource is available inside the preview component through its data input.

See Also​