Icons

Icons by @ng-icons/tabler-icons

The component library does not provide icons.

Component Blueprint

X: 1280 · Y: 720 · Grid: 8px

Drag Drop

Preview

CDK-backed drag and drop primitives for sortable lists, connected lists, and swimlane boards.

01 Hero Preview

Grid: 8px · Scale: 1:1

To do

Ready

Tighten onboarding copyLow Mira

Empty states QAMedium Ivo

Active

In flight

Dashboard drag cardsHigh Noor

Metrics panel polishMedium Kai

Review

Needs signoff

Keyboard reviewHigh Ana

02 Usage

import {
  CdkDragDrop,
  FrDragDropModule,
  moveItemInArray,
  transferArrayItem,
} from '@frame-ui-ng/components/drag-drop';

readonly tasks = [
  { id: 'audit', title: 'Audit keyboard paths' },
  { id: 'motion', title: 'Review drag motion' },
  { id: 'publish', title: 'Publish package' },
];

drop(event: CdkDragDrop<Array<{ id: string; title: string }>>): void {
  moveItemInArray(this.tasks, event.previousIndex, event.currentIndex);
}

HTML

<div frDropList [frDropListData]="tasks" (frDropListDropped)="drop($event)">
  @for (task of tasks; track task.id) {
    <article frDrag [frDragData]="task">
      {{ task.title }}
    </article>
  }
</div>

03 Examples

Basic

Apply `frDrag` to the host when the full row or card should be draggable. No handle is required.

Component Sheet

Grid: 8px · Scale: 1:1

Basic

The entire row is the drag target when no handle is projected.

Drag from anywhere on this rowNo handle required

Full-card gesture targetUseful for compact lists

Content moves as one elementThe host owns frDrag

Drag handles

Add `frDragHandle` when dragging should only start from a specific affordance inside the draggable item.

Component Sheet

Grid: 8px · Scale: 1:1

Drag handles

Project frDragHandle when only part of the row should start dragging.

Research interaction statesFoundation

Map drag tokensStyling

Draft usage examplesDocs

List

Start with a single drop list when you need a simple draggable collection with FrameUI surfaces.

Component Sheet

Grid: 8px · Scale: 1:1

Backlog list

A drop list can start as a simple ordered collection.

Research interaction statesFoundation

Map drag tokensStyling

Draft usage examplesDocs

Reordering

Use `moveItemInArray` in the drop handler to persist the visual order back into the source array.

Component Sheet

Grid: 8px · Scale: 1:1

Release checklist

Drag rows to reprioritize the rollout.

Audit keyboard pathsAccessibility

Review drag motionInteraction

Prepare release notesDelivery

Publish packageRelease

Drag and drop between lists

Wrap related lists in `frDragDropGroup` to auto-connect them, then use `transferArrayItem` when an item crosses containers.

Component Sheet

Grid: 8px · Scale: 1:1

Backlog

3 tasks

Planned

Add filter controlsFeature

Design audit logResearch

Batch edit flowUX

Done

2 tasks

Shipped

Token migrationSystem

Empty state passPolish

Nested draggables

Use handles on the outer draggable when a card contains its own nested draggable rows. This keeps child drag gestures from accidentally starting the parent drag.

Component Sheet

Grid: 8px · Scale: 1:1

Nested draggables

Drag cards by the outer handle, or reorder child rows inside each card.

Profile cardParent card with nested checklist

Avatar upload

Timezone selector

Billing cardIndependent child ordering

Invoice address

Tax ID field

Disabled dragging

Disable a draggable item with `frDragDisabled`. Disable the projected handle too when the handle should reflect the same unavailable state.

Component Sheet

Grid: 8px · Scale: 1:1

Disabled dragging

Disable individual drags while keeping the rest of the list sortable.

Can be movedDrag enabled

Billing migrationLocked for this workflow

Disabled

Release notesDrag enabled

Swimlanes

Use the same grouped-list pattern for kanban boards and status swimlanes where every lane can receive cards.

Component Sheet

Grid: 8px · Scale: 1:1

To do

Ready

Tighten onboarding copyLow Mira

Empty states QAMedium Ivo

Active

In flight

Dashboard drag cardsHigh Noor

Metrics panel polishMedium Kai

Review

Needs signoff

Keyboard reviewHigh Ana

04 Custom Styling

Override the drag and drop tokens on a local wrapper when a board needs denser cards, stronger previews, or a different receiving surface.

Component Sheet

Grid: 8px · Scale: 1:1

Release checklist

Drag rows to reprioritize the rollout.

Audit keyboard pathsAccessibility

Review drag motionInteraction

Prepare release notesDelivery

Publish packageRelease

05 Token Inspector

Inspect the list surface, draggable item, placeholder, preview, and drag handle tokens that shape drag-and-drop density and interaction treatment.

Backlog list

A drop list can start as a simple ordered collection.

Research interaction statesFoundation

Map drag tokensStyling

Draft usage examplesDocs

06 Design Tokens

Use these CSS custom properties to tune drag surfaces, drop-list spacing, placeholders, previews, and handle affordances.

SCSS


  --frame-drag-drop-gap: 0.75rem;
  --frame-drag-drop-group-gap: 1rem;
  --frame-drop-list-min-height: 3.5rem;
  --frame-drop-list-padding: 0.5rem;
  --frame-drop-list-radius: var(--frame-radius-lg);
  --frame-drop-list-bg: var(--frame-surface);
  --frame-drop-list-border: var(--frame-border);
  --frame-drop-list-hover-border: color-mix(in srgb, var(--frame-primary) 45%, var(--frame-border));
  --frame-drag-gap: 0.75rem;
  --frame-drag-padding: 0.875rem;
  --frame-drag-radius: var(--frame-radius-md);
  --frame-drag-bg: var(--frame-background);
  --frame-drag-color: var(--frame-foreground);
  --frame-drag-border: var(--frame-border);
  --frame-drag-shadow: var(--frame-shadow-xs);
  --frame-drag-hover-bg: var(--frame-accent);
  --frame-drag-preview-shadow: var(--frame-shadow-xl);
  --frame-drag-placeholder-opacity: 0.24;
  --frame-drag-sort-duration: 250ms;
  --frame-drag-sort-easing: cubic-bezier(0, 0, 0.2, 1);
  --frame-drag-handle-color: var(--frame-muted-foreground);
  --frame-drag-handle-hover-color: var(--frame-foreground);