Angular7 - Vật liệu / CDK-Kéo và thả

Tính năng Kéo và Thả mới được thêm vào Angular 7 CDK giúp kéo và thả các phần tử khỏi danh sách. Chúng ta sẽ hiểu hoạt động của Mô-đun Kéo và Thả với sự trợ giúp của một ví dụ. Tính năng được thêm vào cdk. Trước tiên, chúng ta cần tải xuống phụ thuộc như hình dưới đây -

npm install @angular/cdk --save

Khi bước trên được thực hiện. Hãy để chúng tôi nhập mô-đun kéo và thả trong app.module.ts như hình dưới đây -

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 { }

DragDropModule được nhập từ '@angular/cdk/drag-drop' và mô-đun được thêm vào mảng nhập như hình trên.

Chúng tôi sẽ sử dụng thông tin chi tiết từ api, (http://jsonplaceholder.typicode.com/users) để hiển thị trên màn hình. Chúng tôi có dịch vụ sẽ lấy dữ liệu từ api như hình dưới đây -

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);
   }
}

Sau khi hoàn tất, hãy gọi dịch vụ bên trong app.component.ts như hình dưới đây -

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);
      });
   }
}

Chúng tôi có sẵn dữ liệu bắt buộc trong biến personaldetails. Bây giờ chúng ta hãy sử dụng tương tự để hiển thị cho người dùng như hình dưới đây -

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

Chúng tôi đã thêm class = ”divlayout” và chi tiết của lớp có trong app.component.css.

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

Màn hình sau sẽ được hiển thị trong trình duyệt -

Nó sẽ không kéo và thả bất cứ thứ gì, chúng ta cần thêm thuộc tính cdk dragdrop trong app.component.html như hình dưới đây -

<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;

Những cái được đánh dấu là tất cả các thuộc tính cần thiết để thực hiện kéo và thả. Khi bạn kiểm tra trong trình duyệt, nó cho phép bạn kéo mục đó. Nó sẽ không bỏ nó trong danh sách và sẽ vẫn như cũ khi bạn rời khỏi con trỏ chuột.

Ở đây nó cho phép kéo mục từ danh sách nhưng một khi bạn rời con trỏ chuột, nó sẽ chuyển đến và ổn định ở vị trí cũ. Để thêm tính năng thả, chúng ta cần thêm sự kiện onDrop trong app.component.ts như hình dưới đây -

Đầu tiên, chúng ta phải nhập các mô-đun cdk dragdrap như hình dưới đây -

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

Đây là mã đầy đủ trong 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);
      }
   }
}

Hàm onDrop xử lý việc thả mục được kéo vào vị trí cần thiết.

Nó sử dụng moveItemInArray và transferArrayItem chúng tôi đã nhập từ mô-đun dragdrop cdk.

Bây giờ chúng ta hãy xem lại bản demo trong trình duyệt -

Bây giờ nó cho phép bạn kéo và thả mục vào vị trí cần thiết như hình trên. Tính năng này hoạt động rất trơn tru mà không có bất kỳ vấn đề nhấp nháy nào và có thể được sử dụng trong ứng dụng của bạn ở bất cứ đâu khi có nhu cầu.