Introduction
occasionally you need to drag and drop data from one table to another table in angular. In this composition, I'll show how we can drag and drop data between two tables in angular. Then, I'm using HTML 5 Drag and Drop APIs to perform drag and drop action in angular.
I've created two tables, one is “ motorist Schedule ” which has motorist schedule information and the other is “ Trailer Info ” which has caravan related information. Then the demand is that I need to drag “ caravan No ” from Trailer Info table and drop it into “ Trailer No ” column in motorist Schedule. And also, once you assign the caravan( using drag and drop from Trailer Info table to motorist Schedule) also you need toun-assign the caravan by performing drag and drop from motorist Schedule to Trailer Info.
Background
To make an object draggable set draggable = true on that element. Just about anything can be drag- enabled images, lines, links, lines, or any luxury on your runner.
There are a number of different events to attach to for covering the entire drag and drop process.
- dragstart - The dragstart event is fired when the stoner starts dragging an element or textbook selection.
- drop - The drop event is fired when an element or textbook selection is dropped on a valid drop target.
- dragleave - The dragleave event is fired when a dragged element or textbook selection leaves a valid drop target.
- dragover - The dragover event is fired when an element or textbook selection is being dragged over a valid drop target.
- dragend - The dragend event is fired when a drag operation is being ended( by releasing a mouse button or hitting the escape key).
Installing Angular CLI
still, you can do that by running the below command, If you have n’t installed Angular CLI.
npm install- g@angular/ cli
Generating a new project
We can use the below command to produce a new design.
ng new DragAndDropDemo
Now that we've created our operation, let’s run it and see if it's working or not.
- ng serve-- open( if you need to open the cybersurfer by the app)
- ng serve( if you want to manually open the cybersurfer).
- You can always use' ng s' as well
The command will make your operation and run it in the cybersurfer.
Create JSON Data Source for two tables
I've created two JSON lines to bind the data in motorist Schedule and Trailer Info table.
system.json
Add JSON train with name system.json ” in the operation. Add below JSON data law in this train.
{
"data": [{
"id": 1,
"systemId": "Sch001",
"driverName": "Anand",
"origin": "Mumbai",
"destination": "Delhi",
"macintoshNumber": "N/A"
}, {
"id": 2,
"systemId": "Sch002",
"driverName": "Rustam",
"origin": "Mumbai",
"destination": "Pune",
"macintoshNumber": "N/A"
}, {
"id": 3,
"systemId": "Sch003",
"driverName": "Ramesh",
"origin": "Delhi",
"destination": "Chennai",
"macintoshNumber": "N/A"
}, {
"id": 4,
"systemId": "Sch004",
"driverName": "Anuj",
"origin": "Mumbai",
"destination": "Chennai",
"macintoshNumber": "N/A"
}, {
"id": 5,
"systemId": "Sch005",
"driverName": "Kishor",
"origin": "Mumbai",
"destination": "Goa",
"macintoshNumber": "N/A"
}, {
"id": 6,
"systemId": "Sch006",
"driverName": "Suresh",
"origin": "Mumbai",
"destination": "Nashik",
"macintoshNumber": "N/A"
}, {
"id": 7,
"systemId": "Sch007",
"driverName": "Mahesh",
"origin": "Delhi",
"destination": "Luckmow",
"macintoshNumber": "N/A"
}, {
"id": 8,
"systemId": "Sch008",
"driverName": "Chandan",
"origin": "Mumbai",
"destination": "Jaipur",
"macintoshNumber": "N/A"
}, {
"id": 9,
"systemId": "Sch009",
"driverName": "Narendra",
"origin": "Mumbai",
"destination": "Banglore",
"macintoshNumber": "N/A"
}, {
"id": 10,
"systemId": "Sch010",
"driverName": "Jitendra",
"origin": "Banglore",
"destination": "Manglore",
"macintoshNumber": "N/A"
}]
}
macintosh.json
Add JSON train with name “macintosh.json ” in the operation. Add below JSON data law in this train.
{
"data": [{
"macintoshNumber": "Trl001",
"origin": "Mumbai",
"destination": "Delhi"
}, {
"macintoshNumber": "Trl002",
"origin": "Mumbai",
"destination": "Pune"
}, {
"macintoshNumber": "Trl003",
"origin": "Delhi",
"destination": "Chennai"
}, {
"macintoshNumber": "Trl004",
"origin": "Mumbai",
"destination": "Chennai"
}, {
"macintoshNumber": "Trl005",
"origin": "Mumbai",
"destination": "Goa"
}, {
"macintoshNumber": "Trl006",
"origin": "Mumbai",
"destination": "Nashik"
}, {
"macintoshNumber": "Trl007",
"origin": "Delhi",
"destination": "Luckmow"
}]
}
Create Service
create a service with name “app.service ” to give the data. Add below law inapp.service train.
import{Injectable} from '@angular/core';
import * as SystemData from "./system.json";
import * as MacintoshData from "./macintosh.json";
@Injectable()
export class Service {
constructor() {}
getSystemData() {
return SystemData;
}
getMacintoshData() {
return MacintoshData;
}
}
still, there are two lines of law as below, If you look into above law. This law will Import the JSON data inapp.service.
import * as SystemData from "./system.json";
import * as MacintoshData from "./macintosh.json";
To import the JSON data into angular, you need to set" resolveJsonModule" true intsconfig.json train in compilerOptions section.
Html Code
Add below law inapp.component.html train.
<div>
<h2 style="text-align: center;"> Drag and Drop in Angular</h2>
</div>
<br />
<br />
<div class="Table">
<div class="Row">
<div class="Cell" style="width:50%;">
<h2 style="text-align: center;">System Info </h2>
<table>
<thead>
<th style="display: none;">ID</th>
<th>System ID</th>
<th>Driver Name</th>
<th>Origin</th>
<th>Destination</th>
<th>Macintosh No</th>
</thead>
<tbody *ngFor="let sch of SystemData ; let i=index;">
<tr>
<td style="display: none;">{{sch.id}}</td>
<td>{{sch.systemId}}</td>
<td>{{sch.driverName}}</td>
<td>{{sch.origin}}</td>
<td>{{sch.destination}}</td>
<td class="trailerLink" [draggable]="sch.macintoshNumber!=='N/A'" (dragstart)="dragStartDriverSch($event, sch)" (drop)="onDropDriverSch($event, sch)" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)">{{sch.macintoshNumber}}</td>
</tr>
</tbody>
</table>
</div>
<div class="Cell" style="width:40%;">
<h2 style="text-align: center;">Macintosh Info</h2>
<table (drop)="onDropToTrailer($event)">
<thead>
<th>Macintosh No</th>
<th>Origin</th>
<th>Destination</th>
</thead>
<tbody *ngFor="let trl of MacintoshData ; let i=index;">
<tr>
<td class="trailerLink" [draggable]="true" (dragstart)="dragStartTrailer($event, trl)" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (dragend)="onDragLeave($event)">{{trl.macintoshNumber}}</td>
<td>{{trl.origin}}</td>
<td>{{trl.destination}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
TS Code
Add below law inapp.component.ts train.
import {
Component
} from '@angular/core';
import {
Service
} from "./app.service";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Service]
})
export class AppComponent {
sData: any;
SystemData;
tData: any;
MacintoshData;
constructor(public service: Service) {}
ngOnInit() {
this.getSystemData()
this.getMacintoshData();
}
getSystemData() {
this.sData = this.service.getSystemData();
this.SystemData = this.sData.default.data;
}
getMacintoshData() {
this.tData = this.service.getMacintoshData();
this.MacintoshData = this.tData.default.data;
}
dragStartTrailer(event, data) {
event.dataTransfer.setData("MacintoshData", JSON.stringify(data));
}
dragStartDriverSch(event, data) {
let item = {
'macintoshNumber': data.macintoshNumber,
'origin': data.origin,
'destination': data.destination,
}
event.dataTransfer.setData("SystemInfoData", JSON.stringify(item));
}
onDropDriverSch(event, data) {
if (event.dataTransfer.getData("MacintoshData")) {
var trlData = JSON.parse(event.dataTransfer.getData("MacintoshData"));
var sch = this.SystemData.find(d => d.scheduleId == data.scheduleId);
sch.macintoshNumber = trlData.macintoshNumber;
var index = this.MacintoshData.findIndex(function(item, i) {
return item.macintoshNumber === trlData.macintoshNumber
});
if (index > -1) {
this.MacintoshData.splice(index, 1);
}
}
}
onDropToTrailer(event) {
if (event.dataTransfer.getData("SystemInfoData")) {
var schData = JSON.parse(event.dataTransfer.getData("SystemInfoData"));
var sch = this.SystemData.find(d => d.macintoshNumber == schData.macintoshNumber);
sch.macintoshNumber = 'N/A';
this.MacintoshData.push(schData);
this.MacintoshData.sort(function(a, b) {
return a['macintoshNumber'].localeCompare(b['macintoshNumber']);
});
}
}
onDragOver(event) {
event.stopPropagation();
event.preventDefault();
}
onDragLeave(event) {
event.stopPropagation();
event.preventDefault();
}
}
Now make and run the operation. Please see the below rally to drag and drop the caravan.
