Category / Section
How to create Angular 4 drag and drop ListBox?
5 mins read
Description
This knowledge base explains how to create angular 4 Drag and Drop List using ListBox component.
Solution
This can be achieved in ListBox by setting the allowDragAndDrop property to true and this provides an option to drag an item or a group of items and drop them within a single list box or among multiple list boxes. Multiple list boxes are mapped using the scope property, in which the values are the same.
[App.component.ts]
import { Component } from '@angular/core';
import { ListBoxComponent } from '@syncfusion/ej2-angular-dropdowns';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
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"
}
}
[App.component.html]
<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>
Demo Sample: https://stackblitz.com/edit/angular4-unkmkh?file=app%2Fapp.component.ts
