Angular7-マテリアル/CDK-ドラッグアンドドロップ

Angular 7 CDKに追加された新しいドラッグアンドドロップ機能は、リストから要素をドラッグアンドドロップするのに役立ちます。例の助けを借りて、ドラッグアンドドロップモジュールの動作を理解します。この機能はcdkに追加されます。以下に示すように、まず依存関係をダウンロードする必要があります-

npm install @angular/cdk --save

ドラッグアンドドロップ機能

上記の手順が完了したら。以下に示すようにapp.module.tsにドラッグアンドドロップモジュールをインポートしましょう-

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は '@ angular/cdk/drag-drop' からインポートされ、上記のようにモジュールが配列をインポートするために追加されます。

APIの詳細、http：//jsonplaceholder.typicode.com/users [（http://jsonplaceholder.typicode.com/users）]を使用して画面に表示します。以下に示すように、APIからデータを取得するサービスがあります-

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

完了したら、以下に示すようにapp.component.ts内のサービスを呼び出します-

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   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);
      });
   }
}

personaldetails変数に必要なデータがあります。次に、以下に示すようにユーザーに表示するために同じものを使用しましょう-

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

class =” divlayout”を追加しました。クラスの詳細はapp.component.cssにあります。

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

次の画面がブラウザに表示されます-

ドラッグドロップ

何もドラッグアンドドロップしません。以下に示すように、app.componentlにdragdrop cdkプロパティを追加する必要があります-

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

強調表示されているのは、ドラッグアンドドロップを実行するために必要なすべてのプロパティです。ブラウザでチェックインすると、アイテムをドラッグできます。リストにドロップすることはなく、マウスポインターを離れてもそのまま残ります。

ドラッグドロップモジュール

ここでは、リストから項目をドラッグできますが、マウスポインターを離れると、同じ場所に移動して落ち着きます。ドロップ機能を追加するには、以下に示すようにapp.component.tsにイベントonDropを追加する必要があります-

まず、以下に示すようにdragdrap cdkモジュールをインポートする必要があります-

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

ここに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.componentl',
   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);
      }
   }
}

onDrop関数は、ドラッグされたアイテムを必要な位置にドロップします。

cdk dragdropモジュールからインポートした moveItemInArray および transferArrayItem を使用します。

ブラウザでデモをもう一度見てみましょう-

ドラッグドロップ位置

これで、上記のように必要な位置にアイテムをドラッグアンドドロップできます。この機能はちらつきの問題なく非常にスムーズに機能し、必要に応じてアプリケーションで使用できます。

Angular7-materials-cdk-drag-and-drop

Angular7-マテリアル/CDK-ドラッグアンドドロップ