Skip to main content

Drag Source List

Overview​

The DragSourceListComponent is a wrapper that renders a list of draggable items. It simplifies working with multiple DragSourceComponent instances and supports custom templates and previews.

  • Renders a list of draggable items from an array of DragSourceData<TType>.
  • Provides inputs for:
    • customTemplate (to define how each item looks).
    • previewComponent (to override the drag preview).
    • useBrowserPreview (whether to use the browser's native drag preview).
  • Delegates rendering of each individual item to DragSourceComponent.

Import​

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

Selector​

ngx-drag-source-list

API Reference​

Inputs​

NameDefaultDescription
dragSourceList: DragSourceData<TType>[]-The array of items to render as draggable.
previewComponent: Type<PreviewComponent<DragSourceData<TType>>>-A custom Angular component used for drag preview.
useBrowserPreview: boolean | string-If true, uses the native browser drag preview instead of a custom one.
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.

Example​

<ngx-drag-source-list [dragSourceList]="items">
  <ng-template [ngxDragSourceTemplate]="items" let-item>
    <div class="custom-drag-source">
      {{ item.label }}
    </div>
  </ng-template>
</ngx-drag-source-list>
  • items is an array of drag source data.
  • The ngxDragSourceTemplate (DragSourceTemplateDirective) provides type-safe access to each item.
  • You can override how each item looks inside the list.

See Also​