Drag Elements Blocks

Drag elements are used to drag and drop elements in a container.

Drag Elements

Used in:

memory-album

words-album

drag-elements.component.html

drag-elements.component.ts

drag-elements/index.ts

<div [class]="classNames('relative size-full', containerClass())">
  @for (element of dragElements(); track $index) {
    <div
      [class]="
        classNames(
          'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
          startResetPositions() ? 'transition-all duration-300' : ''
        )
      "
      cdkDrag
      [cdkDragBoundary]="dragBoundary()"
      [cdkDragDisabled]="element.dragDisabled()"
      [style.zIndex]="setZIndices().indexOf($index)"
      [style.cursor]="isDraggingMap.get($index) ? 'grabbing' : 'grab'"
      (cdkDragStarted)="onDragStarted($event, $index)"
      (cdkDragEnded)="onDragEnded($event, $index)">
      <ng-container [ngTemplateOutlet]="element.templateRef"></ng-container>
    </div>
  }
</div>

Found a bug? Let us know →