Angular Draggable

An Angular directive library that makes any HTML element draggable and provides a drop-target directive with developer hooks.

Requirements

• Angular 19+
• RxJS 7+
• zone.js 0.15+

Installation

npm install angular-draggable

Quick start

Standalone components (recommended)

import { DraggableDirective, DroppableDirective } from 'angular-draggable';

@Component({
  standalone: true,
  imports: [DraggableDirective, DroppableDirective],
  template: `...`
})
export class AppComponent {}

NgModule

import { NgDraggableModule } from 'angular-draggable';

@NgModule({
  imports: [NgDraggableModule],
})
export class AppModule {}

Draggable directive

Apply [draggable] to any element that has position: absolute, fixed, or relative.

<!-- Always draggable -->
<div draggable style="position: fixed;">Drag me</div>

<!-- Conditionally draggable -->
<div [draggable]="isDraggable" style="position: fixed;">Drag me</div>

<!-- With drag data passed to the drop target -->
<div [draggable]="true" [dragData]="{ id: 1, label: 'Task A' }" style="position: fixed;">
  Task A
</div>

| Input | Type | Default | Description | |---|---|---|---| | [draggable] | boolean \| 'true' \| 'false' | true | Enable or disable dragging | | [dragData] | unknown | undefined | Arbitrary data forwarded to the drop target |

Droppable directive

Apply [droppable] to any element you want to act as a drop zone.

<div
  droppable
  (itemDropped)="onDrop($event)"
  (dragEnter)="isOver = true"
  (dragLeave)="isOver = false"
  [class.highlight]="isOver"
>
  Drop zone
</div>

| Input | Type | Default | Description | |---|---|---|---| | [droppable] | boolean \| 'true' \| 'false' | true | Enable or disable this drop zone |

| Output | Payload | When | |---|---|---| | (itemDropped) | DropEvent | A draggable element is released over this zone | | (dragEnter) | void | The cursor enters the zone during a drag | | (dragLeave) | void | The cursor leaves the zone, or the drag ends |

DropEvent

interface DropEvent<T = unknown> {
  data: T;                      // value from [dragData]
  sourceElement: HTMLElement;   // the element being dragged
  targetElement: HTMLElement;   // the drop zone element
  x: number;                    // drop x coordinate (clientX)
  y: number;                    // drop y coordinate (clientY)
}

Example handler

import { DropEvent } from 'angular-draggable';

onDrop(event: DropEvent<{ id: number; label: string }>): void {
  console.log(`Dropped "${event.data.label}" at (${event.x}, ${event.y})`);
}

Full example

<!-- Draggable items -->
<div
  *ngFor="let item of items"
  [draggable]="true"
  [dragData]="item"
  [style.top]="item.top"
  [style.left]="item.left"
  style="position: fixed;"
>
  {{ item.label }}
</div>

<!-- Drop zones -->
<div
  droppable
  (itemDropped)="onDrop('Zone A', $event)"
  (dragEnter)="zoneAOver = true"
  (dragLeave)="zoneAOver = false"
  [class.active]="zoneAOver"
>
  Zone A
</div>

<div
  droppable
  (itemDropped)="onDrop('Zone B', $event)"
  (dragEnter)="zoneBOver = true"
  (dragLeave)="zoneBOver = false"
  [class.active]="zoneBOver"
>
  Zone B
</div>

onDrop(zone: string, event: DropEvent): void {
  console.log(`${event.data} dropped onto ${zone}`);
}

Live demo

https://ajaysinghj8.github.io/angular-draggable

Development

# Build the library
npm run build

# Run tests
npm test

# Run the example app
cd example && npm install && npm start

License

MIT © Ajay Singh