Drag and Drop for Angular components

19 Aug 20257 minutes to read

Drag and drop is a user interface feature that allows users to select one or more items, move them to a different location, and place them onto another interface element. This interaction is performed by “dragging” the selected items with a pointing device (such as a mouse) and then “dropping” them at the desired destination.

Syncfusion® Angular components provide comprehensive drag and drop functionality through two primary libraries: Draggable and Droppable. These libraries work together to create intuitive user interactions in your applications.

Draggable

The Syncfusion® Draggable library empowers developers to make any DOM element draggable by initializing a Draggable object with the element as a parameter. This functionality is essential for interactive applications, enabling users to reorder items dynamically. Below is a demonstration of how to implement draggable functionality for a specific DOM element.

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

Clone draggable element

Syncfusion® provides the option to create a clone of a draggable element while the user is dragging it. It can be achieved by setting the clone property to true. Here’s an example of how to create a clone of a draggable element.

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

Drag area

A drag area is a confined section within the user interface where drag-and-drop operations are permissible. Executing a drag within this area can trigger specific actions or events, enhancing control over user interactions. Define a drag area by setting the dragArea property as illustrated below.

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" });
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Droppable

The Droppable component designates parts of the user interface that can serve as targets for draggable elements. Utilizing Syncfusion®’s Droppable library, you can transform any DOM element into a droppable area, capable of accepting draggable components.

On interaction between a draggable and a droppable component, a drop event is fired. Information about the dropped element is accessible via event arguments, allowing developers to append the dragged element to the target dynamically.

Below is an example demonstrating the creation of droppable zones.

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