Drag and Drop for Angular components

5 Apr 20257 minutes to read

Drag and drop is a feature of a user interface that allows users to select an item or items and then move them to a different location or onto another interface element by “dragging” the selected item(s) with a pointing device (such as a mouse) and then “dropping” them at the desired location.

Syncfusion® Angular components offer robust drag and drop functionality facilitated by two primary libraries: Draggable and Droppable.

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));