Angular7 - Matériaux / CDK-Drag and Drop

La nouvelle fonctionnalité de glisser-déposer ajoutée à Angular 7 CDK permet de faire glisser et déposer les éléments de la liste. Nous comprendrons le fonctionnement du module Drag and Drop à l'aide d'un exemple. La fonctionnalité est ajoutée à cdk. Nous devons d'abord télécharger la dépendance comme indiqué ci-dessous -

npm install @angular/cdk --save

Une fois l'étape ci-dessus terminée. Importons le module glisser-déposer dans app.module.ts comme indiqué ci-dessous -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Le DragDropModule est importé de '@angular/cdk/drag-drop' et le module est ajouté pour importer le tableau comme indiqué ci-dessus.

Nous utiliserons les détails de l'API, (http://jsonplaceholder.typicode.com/users) pour être affichés à l'écran. Nous avons un service qui récupérera les données de l'API comme indiqué ci-dessous -

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "http://jsonplaceholder.typicode.com/users";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

Une fois terminé, appelez le service à l'intérieur de app.component.ts comme indiqué ci-dessous -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public personaldetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.personaldetails);
      });
   }
}

Nous avons les données requises disponibles dans la variable personaldetails. Maintenant, utilisons la même chose pour afficher à l'utilisateur comme indiqué ci-dessous -

<h3>Angular 7 - Drag and Drop Module</h3>
<div>
   <div *ngFor="let item of personaldetails; let i = index" class="divlayout”>
      {{item.name}}
   </div >
</div>

Nous avons ajouté class = "divlayout" et les détails de la classe sont dans app.component.css.

.divlayout{
   width: 40%;
   background-color: #ccc;
   margin-bottom: 5px;
   padding: 10px 10px;
   border: 3px solid #73AD21;
}

L'écran suivant sera affiché dans le navigateur -

Il ne glissera pas et ne déposera rien, nous devons ajouter les propriétés cdk dragdrop dans app.component.html comme indiqué ci-dessous -

<h3>Angular 7 - Drag and Drop Module</h3>
<div cdkDropList
   #personList = "cdkDropList"
   [cdkDropListData] = "personaldetails"
   [cdkDropListConnectedTo] = "[userlist]"
   class = "example-list"
   (cdkDropListDropped) = "onDrop($event)" >
   
   <div *ngFor = "let item of personaldetails; 
      let i = index" class = "divlayout" cdkDrag>
      {{item.name}}
   </div >
</div&t;

Ceux en surbrillance sont toutes les propriétés nécessaires pour effectuer un glisser-déposer. Lorsque vous archivez le navigateur, il vous permet de faire glisser l'élément. Il ne le déposera pas dans la liste et restera tel quel lorsque vous quitterez le pointeur de la souris.

Ici, il permet de faire glisser l'élément de la liste mais une fois que vous quittez le pointeur de la souris, il ira s'installer au même endroit. Pour ajouter la fonctionnalité de dépôt, nous devons ajouter l'événement onDrop dans app.component.ts comme indiqué ci-dessous -

Nous devons d'abord importer les modules dragdrap cdk comme indiqué ci-dessous -

import {CdkDragDrop, moveItemInArray, transferArrayItem} 
from '@angular/cdk/drag-drop';

Voici le code complet dans app.component.ts -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public personaldetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails = Array.from(Object.keys(data), 
         k=>data[k]);
         console.log(this.personaldetails);
      });
   }
   onDrop(event: CdkDragDrop<string[]>) {
      if (event.previousContainer === event.container) {
         moveItemInArray(event.container.data, 
            event.previousIndex, event.currentIndex);
      } else {
         transferArrayItem(event.previousContainer.data,
         event.container.data,
         event.previousIndex,
         event.currentIndex);
      }
   }
}

La fonction onDrop se charge de déposer l'élément glissé dans la position souhaitée.

Il utilise le moveItemInArray et transferArrayItem nous avons importé du module dragdrop de cdk.

Maintenant, voyons à nouveau la démo dans le navigateur -

Maintenant, il vous permet de faire glisser et déposer l'élément dans la position requise, comme indiqué ci-dessus. La fonctionnalité fonctionne très bien sans aucun problème de scintillement et peut être utilisée dans votre application partout où le besoin s'en fait sentir.