Angular Konva Drag and Drop Tutorial

To make a shape draggable, set draggable: true in its config and listen to drag events on the node.

This example moves the dragged circle to the top of its layer when dragging starts.

Instructions: Drag the circle around the stage and notice that it is brought to the top when you start dragging.

For more details, see the Node API Reference and the Circle API Reference.

Drag and Drop Example

import { Component } from '@angular/core';
import { StageConfig } from 'konva/lib/Stage';
import { CircleConfig } from 'konva/lib/shapes/Circle';

import {
  CoreShapeComponent,
  StageComponent,
} from 'ng2-konva';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ko-stage [config]="configStage">
      <ko-layer>
        <ko-circle
          [config]="configCircle"
          (dragstart)="handleDragstart($event)"
        ></ko-circle>
      </ko-layer>
    </ko-stage>
  `,
  imports: [StageComponent, CoreShapeComponent],
})
export default class App {
  public configStage: StageConfig = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  public configCircle: CircleConfig = {
    x: 100,
    y: 100,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true,
  };

  public handleDragstart(event: any): void {
    event.target.moveToTop();
  }
}

Open Sandbox