События перетаскивания Angular PrimeNG
Опубликовано: 23 Февраля, 2023
Angular PrimeNG — это библиотека компонентов пользовательского интерфейса для приложений Angular. Он предлагает множество готовых тем и компонентов пользовательского интерфейса для различных задач, таких как ввод, меню, диаграммы, кнопки и т. д. В этой статье мы рассмотрим события перетаскивания Angular PrimeNG.
Директивы перетаскивания (pDraggable и pDroppable) используются для применения поведения перетаскивания к любому элементу. Три события перетаскивания перечислены ниже.
Перетаскиваемые события Angular PrimeNG:
- onDragStart: это событие принимает обратный вызов, который запускается, когда начинается перетаскивание.
- onDrag: это событие принимает обратный вызов, который вызывается при перетаскивании.
- onDragEnd: это событие принимает обратный вызов, который запускается, когда перетаскивание заканчивается.
Выпадающие события Angular PrimeNG:
- onDrop: это событие запускается, когда перетаскиваемый элемент помещается в область, которую можно перетаскивать.
- onDragEnter: это событие запускается, когда перетаскиваемый элемент входит в область сбрасываемого объекта.
- onDragLeave: это событие запускается, когда перетаскиваемый элемент покидает область, которую можно перетаскивать.
Синтаксис:
// For Droppable
<div
pDroppable="..."
(event-name)="callback()">
...
</div>Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:
Пример 1. В приведенном ниже примере показано использование перетаскиваемых событий и отображение всплывающего сообщения в правом верхнем углу при возникновении любого из событий.
- приложение.component.html:
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:
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: "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:
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"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, FormsModule, TableModule, ToastModule, DragDropModule ], declarations: [AppComponent], bootstrap: [AppComponent]})export class AppModule { } |
Выход:
Пример 2. В этом примере мы использовали удаляемые события, чтобы уведомить пользователя о них с помощью всплывающих сообщений.
- приложение.component.html:
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: