Drag and Drop for Angular Components

2 Feb 20267 minutes to read

Drag and drop is a direct manipulation interface pattern that allows users to select objects, move them to different locations, and release them to perform actions such as reordering, moving between containers, or organizing content. This intuitive interaction improves usability in applications like task managers, file explorers, and kanban boards.

Syncfusion^® Angular components provide robust drag and drop support through the Draggable and Droppable classes from the @syncfusion/ej2-base package. These classes can be applied to any DOM element, enabling flexible and customizable drag-and-drop experiences.

Import the required classes in your component:

import { Draggable, Droppable } from '@syncfusion/ej2-base';

Making Elements Draggable

To enable dragging on any HTML element, create a Draggable instance and pass the target element.

The following example demonstrates basic draggable functionality:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, ViewChild } from '@angular/core';
import { Draggable } from  '@syncfusion/ej2-base';

@Component({

standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div #ele class='element'><p class='drag'>Draggable Element </p></div>
    </div> `,
    styleUrls: ['../index.css']
})

export class AppComponent {

@ViewChild('ele',{static: false})element:any;

    ngAfterViewInit() {
        let draggable: Draggable =
        new Draggable(this.element.nativeElement,{ clone: false });
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Creating a Clone During Drag

Set the clone property to true to display a visual copy of the dragged element while the original remains in place. This is useful for drag-and-drop operations where the source should not move until dropped successfully.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

import { Component, ViewChild } from '@angular/core';
import { Draggable } from  '@syncfusion/ej2-base';

@Component({
standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div #ele class='element'><p class='drag'>Draggable Element </p></div>
    </div> `,
    styleUrls: ['../index.css']
})

export class AppComponent {

@ViewChild('ele',{static: false})element:any;

    ngAfterViewInit() {
        let draggable: Draggable =
        new Draggable(this.element.nativeElement,{ clone: true });
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Restricting the Drag Area

Limit the draggable movement to a specific container by setting the dragArea property to a CSS selector or DOM element. The dragged element (or its clone) will be constrained within these boundaries.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

 import { Component, ViewChild } from '@angular/core';
 import { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base';

 @Component({
standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div id='droppable'><p class='drop'>Drop target </p></div>
    <div id='draggable'><p class='drag'>Draggable Element </p></div>
    </div> `,
    styleUrls: ['../index.css']
})

export class AppComponent {
    @ViewChild('droppable',{static: false})element: any;
    @ViewChild('draggable',{static: false})element1: any;

    ngAfterViewInit() {
        let draggable: Draggable = new Draggable(document.getElementById('draggable') as HTMLElement, { clone: false, dragArea: "#droppable" });
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Creating Drop Targets

The Droppable class designates elements as valid drop zones. When a draggable element is released over a droppable target, the drop event fires, providing details such as the target, dragged element, and helper (clone).

Use this event to append or move the dragged element to the drop target.

The following example shows basic drag-and-drop between containers:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'


 
 import { Component, ViewChild } from '@angular/core';
 import { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base';

 @Component({

standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div id='droppable'><p class='drop'>Drop target </p></div>
    <div id='draggable'><p class='drag'>Draggable Element </p></div>
    </div> `,
    styleUrls: ['../index.css']
})

export class AppComponent {
    @ViewChild('droppable',{static: false})element: any;
    @ViewChild('draggable',{static: false})element1: any;

    ngAfterViewInit() {
        let draggable: Draggable = new Draggable(document.getElementById('draggable') as HTMLElement , {clone: false});
        let droppable: Droppable = new Droppable(document.getElementById('droppable') as HTMLElement , {
            drop: (e: DropEventArgs) => {
                ((e.droppedElement as HTMLElement).querySelector('.drag') as Element).textContent = 'Dropped';
            }
        });
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));