Angular PrimeNG Drag and Drop Component
Last Updated :
03 Feb, 2023
Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will Angular PrimeNG Drag and Drop Component.
The Drag and Drop directives (pDraggable and pDroppable) apply drag and drop behavior to any element.
Angular PrimeNG Drag and Drop Draggable Attributes:
- dragEffect: It is used to define the cursor style. The acceptable values for this field are none, copy, move, link, copyMove, linkMove, and all. It is of string type and the default value is null.
- dragHandle: It is a selector and is used to define the drag handle. By default, they can be started anywhere on the target element. It is of string type and the default value is null.
- pDraggableDisabled: It is used to check the element’s draggability, which is essential for conditional circumstances. It is of boolean type and the default value is false.
Angular PrimeNG Draggable Events:
- onDragStart: This event accepts a callback that is triggered when the dragging begins.
- onDrag: This event accepts a callback that is invoked on dragging.
- onDragEnd: This event accepts a callback that is triggered when the dragging
Angular PrimeNG Drag and Drop Droppable Attributes:
- dropEffect: It is used to define the cursor style on drag over. The acceptable values for this field are copy, relocate, link and move. It is of string type and the default value is null.
- pDroppableDisabled: It is used to check the element’s droppability, which is important for conditional circumstances. It is of boolean type and the default value is false.
Angular PrimeNG Droppable Events:
- onDrop: This event is fired when the draggable is dropped in the droppable area.
- onDragEnter: This event is fired when the draggable enters the droppable area.
- onDragLeave: This event is fired when the draggable leaves the droppable area.
Syntax:
import {DragDropModule} from 'primeng/dragdrop';
// For Dragging
<div class="grid">
<div class="col-6" drag-column>
<p-table [value]="..." responsiveLayout="...">
<ng-template pTemplate="header">
....
</ng-template>
<ng-template pTemplate="body" let-person>
....
</ng-template>
</p-table>
</div>
// For Dropping
<div responsiveLayout="scroll">
<p-table [value]="...">
<ng-template pTemplate="header">
....
</ng-template>
<ng-template pTemplate="body" let-person>
....
</ng-template>
</p-table>
</div>
<p-toast [preventOpenDuplicates]="true"></p-toast>
Creating Angular Application and Installing the Module:
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Finally, Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: The project Structure will look like this after following the above steps:
Steps to run the application: Run the below command to see the output
ng serve --save
Example 1: The below example illustrates the use of the Angular PrimeNG Drag and Drop Component.
HTML
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >
Angular PrimeNG Drag and Drop Component
</ h3 >
< div class = "grid" >
< div class = "col-12 md:col-6 drag-column" >
< p-table [value]="available"
responsiveLayout = "scroll" >
< ng-template pTemplate = "header" >
< tr >
< th >Name</ th >
< th >Age</ th >
</ tr >
</ ng-template >
< ng-template pTemplate = "body" let-person>
< tr
pDraggable = "products"
(onDragStart)="dragStart(person);"
(onDrag)="drag()"
(onDragEnd)="dragEnd()">
< td >{{person.name}}</ td >
< td >{{person.age}}</ td >
</ tr >
</ ng-template >
</ p-table >
</ div >
< div
class = "col-12 md:col-6"
pDroppable = "products"
(onDrop)="drop()"
responsiveLayout = "scroll" >
< p-table [value]="selected">
< ng-template pTemplate = "header" >
< tr >
< th >Name</ th >
< th >Age</ th >
</ tr >
</ ng-template >
< ng-template pTemplate = "body" let-person>
< tr >
< td >{{person.name}}</ td >
< td >{{person.age}}</ td >
</ tr >
</ ng-template >
</ p-table >
</ div >
</ div >
< p-toast [preventOpenDuplicates]="true"></ p-toast >
|
Javascript
import { Component } from "@angular/core" ;
import { MessageService } from "primeng/api" ;
interface Person {
id: String;
name: String;
age: number;
}
@Component({
selector: "app-root" ,
templateUrl: "./app.component.html" ,
styleUrls: [ "./app.component.css" ],
providers: [MessageService]
})
export class AppComponent {
constructor(private msg: MessageService) {}
available: Person[] = [];
selected: Person[] = [];
currentlyDragging: Person | null = null ;
ngOnInit() {
this .available = [
{
id: "ASDF12" ,
name: "Sandeep Jain Sir" ,
age: 38
},
{
id: "KJHY45" ,
name: "Shivangi Goel" ,
age: 20
},
{
id: "LKIO34" ,
name: "Harshit Khandelwal" ,
age: 30
},
{
id: "LPOI21" ,
name: "Taranjeet Singh" ,
age: 25
},
{
id: "VANI12" ,
name: "Vanishka Singh" ,
age: 23
}
];
}
dragStart(person: Person) {
this .currentlyDragging = person;
this .msg.add({
severity: "info" ,
summary: "Drag Started" ,
detail: "onDragStart Event"
});
}
drag() {
this .msg.add({
severity: "success" ,
summary: "Dragging..." ,
detail: "onDrag Event"
});
}
dragEnd() {
this .currentlyDragging = null ;
this .msg.add({
severity: "error" ,
summary: "Drag End" ,
detail: "onDragEnd Event"
});
}
drop() {
if ( this .currentlyDragging) {
let currentlyDraggingIndex = this .findIndex( this .currentlyDragging);
this .selected = [... this .selected, this .currentlyDragging];
this .available = this .available.filter(
(val, i) => i != currentlyDraggingIndex
);
this .currentlyDragging = null ;
}
}
findIndex(person: Person) {
let index = -1;
for (let i = 0; i < this .available.length; i++) {
if (person.id === this .available[i].id) {
index = i;
break ;
}
}
return index;
}
}
|
Javascript
import { NgModule } from "@angular/core" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { HttpClientModule } from "@angular/common/http" ;
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { FormsModule } from "@angular/forms" ;
import { TableModule } from "primeng/table" ;
import { ToastModule } from "primeng/toast" ;
import { DragDropModule } from "primeng/dragdrop" ;
import { CardModule } from "primeng/card" ;
@NgModule({
imports: [
CardModule,
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
TableModule,
ToastModule,
DragDropModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
|
Output:
Example 2: Below is another example that illustrates the use of the Angular PrimeNG Drag and Drop Component. Here we have used pDroppableDisabled=”true” attribute property to disable the dropping of element.
HTML
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >
Angular PrimeNG Drag and Drop Component
</ h3 >
< div class = "grid" >
< div class = "col-12 md:col-6 drag-column" >
< p-table [value]="available"
responsiveLayout = "scroll" >
< ng-template pTemplate = "header" >
< tr >
< th >Name</ th >
< th >Age</ th >
</ tr >
</ ng-template >
< ng-template pTemplate = "body" let-person>
< tr pDraggable = "products" (onDragEnd)="dragEnd()">
< td >{{person.name}}</ td >
< td >{{person.age}}</ td >
</ tr >
</ ng-template >
</ p-table >
</ div >
< div
pDroppableDisabled = "true"
class = "col-12 md:col-6"
pDroppable = "products"
(onDrop)="drop()"
responsiveLayout = "scroll" >
< p-table [value]="selected">
< ng-template pTemplate = "header" >
< tr >
< th >Name</ th >
< th >Age</ th >
</ tr >
</ ng-template >
< ng-template pTemplate = "body" let-person>
< tr >
< td >{{person.name}}</ td >
< td >{{person.age}}</ td >
</ tr >
</ ng-template >
</ p-table >
</ div >
</ div >
< p-toast [preventOpenDuplicates]="true"></ p-toast >
|
Javascript
<h1 style= "color:green" >
GeeksforGeeks
</h1>
<h3>
Angular PrimeNG Drag
and Drop Component
</h3>
<div class= "grid" >
<div class= "col-12 md:col-6 drag-column" >
<p-table
[value]= "available"
responsiveLayout= "scroll" >
<ng-template pTemplate= "header" >
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</ng-template>
<ng-template pTemplate= "body" let-person>
<tr
pDraggable= "products"
(onDragEnd)= "dragEnd()" >
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</ng-template>
</p-table>
</div>
<div
pDroppableDisabled= "true"
class= "col-12 md:col-6"
pDroppable= "products"
(onDrop)= "drop()"
responsiveLayout= "scroll" >
<p-table [value]= "selected" >
<ng-template pTemplate= "header" >
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</ng-template>
<ng-template pTemplate= "body" let-person>
<tr>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
<p-toast [preventOpenDuplicates]= "true" ></p-toast>
|
Javascript
import { NgModule } from "@angular/core" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { HttpClientModule } from "@angular/common/http" ;
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { FormsModule } from "@angular/forms" ;
import { TableModule } from "primeng/table" ;
import { ToastModule } from "primeng/toast" ;
import { DragDropModule } from "primeng/dragdrop" ;
import { CardModule } from "primeng/card" ;
@NgModule({
imports: [
CardModule,
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
TableModule,
ToastModule,
DragDropModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
|
Output:
Reference: https://primefaces.org/primeng/dragdrop
Share your thoughts in the comments
Please Login to comment...