Drag and drop in Angular List box component
27 Apr 20247 minutes to read
The ListBox has support to drag an item or a group of selected items and drop it within the same list box or into another list box.
The elements can be customized on drag and drop by using the following events,
Events | Description |
---|---|
dragStart |
Triggers when the selected element is being dragged. |
drag |
Triggers when the selected element is being dragged. |
drop |
Triggers when the selected element is being dropped. |
Single listbox
To drag and drop an item or group of item within the list box can be achieved by setting allowDragAndDrop
property as true
.
The following sample illustrates how to drag and drop an item within the same list box by enabling allowDragAndDrop
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { ListBoxComponent, ListBoxAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
@Component ({
selector: 'app-container',
template: `<div class="e-section-control">
<ejs-listbox [dataSource]="data" [allowDragAndDrop]="true" [fields]="setfield"><ejs-listbox></div>`
})
export class AppComponent {
public data: {[key: string]: Object}[] = [
{ "Name": "Australia", "Code": "AU" },
{ "Name": "Bermuda", "Code": "BM" },
{ "Name": "Canada", "Code": "CA" },
{ "Name": "Cameroon", "Code": "CM" },
{ "Name": "Denmark", "Code": "DK" },
{ "Name": "France", "Code": "FR" },
{ "Name": "Finland", "Code": "FI" },
{ "Name": "Germany", "Code": "DE" },
{ "Name": "Hong Kong", "Code": "HK" }
];
public setfield = { text : "Name" }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Multiple listbox
To drag and drop an item or group of item between two list boxes can be achieved by setting allowDragAndDrop
property as true
and scope
property should be set to both the list boxes.
In the following sample, the allowDragAndDrop
property is set as true
and scope
is set as combined-list
to enable drop and drop in both list boxes.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { ListBoxComponent, ListBoxAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, ReactiveFormsModule, ListBoxAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="e-section-control">
<div class="drag-drop-wrapper">
<div class="listbox-control1">
<h4>Group A</h4>
<ejs-listbox [dataSource]="groupA" [allowDragAndDrop]="true" [fields]="setfield" scope="combined-list" height="290px"></ejs-listbox>
</div>
<div class="listbox-control2">
<h4>Group B</h4>
<ejs-listbox [dataSource]="groupB" [allowDragAndDrop]="true" [fields]="setfield" scope="combined-list" height="290px"></ejs-listbox>
</div></div>
</div>`,
})
export class AppComponent {
public groupA: { [key: string]: Object }[] = [
{ "Name": "Australia", "Code": "AU" },
{ "Name": "Bermuda", "Code": "BM" },
{ "Name": "Canada", "Code": "CA" },
{ "Name": "Cameroon", "Code": "CM" },
{ "Name": "Denmark", "Code": "DK" },
{ "Name": "France", "Code": "FR" },
{ "Name": "Finland", "Code": "FI" },
{ "Name": "Germany", "Code": "DE" },
{ "Name": "Hong Kong", "Code": "HK" }
];
public groupB: { [key: string]: Object }[] = [
{ "Name": "India", "Code": "IN" },
{ "Name": "Italy", "Code": "IT" },
{ "Name": "Japan", "Code": "JP" },
{ "Name": "Mexico", "Code": "MX" },
{ "Name": "Norway", "Code": "NO" },
{ "Name": "Poland", "Code": "PL" },
{ "Name": "Switzerland", "Code": "CH" },
{ "Name": "United Kingdom", "Code": "GB" },
{ "Name": "United States", "Code": "US" }
];
public setfield = { text: "Name" }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));