极客教程Angular PrimeNG拖放事件
Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将Angular PrimeNG拖放事件。
拖放指令（pDraggable和pDroppable）用于对任何元素应用拖放行为。拖放的三个事件列在下面。
Angular PrimeNG可拖动事件：
- onDragStart。该事件接受一个回调，当拖动开始时被触发。
- onDrag: 这个事件接受一个在拖动时调用的回调。
- onDragEnd。该事件接受一个回调，当拖动结束时被触发。
Angular PrimeNG Droppable Events：
- onDrop：该事件在可拖动区域内的可拖动物体被拖动时被触发。
- onDragEnter。当可拖动物体进入可拖动区域时，该事件被触发。
- onDragLeave。当可拖动设备离开可拖动区域时，该事件被触发。
语法:
// For Droppable
<div
pDroppable="..."
(event-name)="callback()">
...
</div>
创建Angular应用程序并安装模块：。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：最后，在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：在完成上述步骤后，项目结构将看起来像这样。
Project Structure
示例1：下面的示例说明了可拖动事件的使用，并在任何事件发生时在右上角显示祝酒词。
- app.component.html:
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Angular PrimeNG Drag
and Drop Drop Events
</h3>
<div class="grid">
<div class="col-12 md:col-6">
<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>
- app.component.ts:
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: "Anshu",
age: 19
},
{
id: "KJHY45",
name: "Shikhar",
age: 22
},
{
id: "LKIO34",
name: "Jayant",
age: 32
},
{
id: "LPOI21",
name: "Krishna",
age: 23
},
{
id: "VANI12",
name: "Vanishka",
age: 20
}
];
}
// On Drag Start
dragStart(person: Person) {
this.currentlyDragging = person;
// Show the toast message on the frontend
this.msg.add({
severity: "info",
summary: "Drag Started",
detail: "onDragStart Event"
})
}
drag()
{
// Show the toast message on the frontend
this.msg.add({
severity: "success",
summary: "Dragging...",
detail: "onDrag Event"
})
}
// On Drag End
dragEnd() {
this.currentlyDragging = null;
// Show the toast message on the frontend
this.msg.add({
severity: "error",
summary: "Drag End",
detail: "onDragEnd Event"
})
}
// On Drop of Item to droppable area
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;
}
}
// Find the Index of a Person
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;
}
}
- app.module.ts:
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';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
TableModule,
ToastModule,
DragDropModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
输出:
例子2：在这个例子中，我们使用了dropppable事件，用toast消息来通知用户它们。
- app.component.html:
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Angular PrimeNG Drag
and Drop Drop Events
</h3>
<div class="grid">
<div class="col-12 md:col-6">
<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);"
(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()"
(onDragEnter)="dragEnter()"
(onDragLeave)="dragLeave()"
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>
- app.component.ts:
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: "Anshu",
age: 19
},
{
id: "KJHY45",
name: "Shikhar",
age: 22
},
{
id: "LKIO34",
name: "Jayant",
age: 32
},
{
id: "LPOI21",
name: "Krishna",
age: 23
},
{
id: "VANI12",
name: "Vanishka",
age: 20
}
];
}
// On Drag Start
dragStart(person: Person) {
this.currentlyDragging = person;
}
dragEnter()
{
// Show the toast message on the frontend
this.msg.add({
severity: "info",
summary: "Drag Enter",
detail: "onDragEnter Event"
})
}
dragLeave()
{
// Show the toast message on the frontend
this.msg.add({
severity: "error",
summary: "Drag Leave",
detail: "onDragLeave Event"
})
}
// On Drag End
dragEnd() {
this.currentlyDragging = null;
}
// On Drop of Item to droppable area
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;
}
// Show the toast message on the frontend
this.msg.add({
severity: "success",
summary: "Dropped",
detail: "onDrop Event"
})
}
// Find the Index of a Person
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;
}
}
- app.module.ts:
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';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
TableModule,
ToastModule,
DragDropModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
输出:
