Angular7からドラッグアンドドロップが色々できるようになっています

Angular7からドラッグアンドドロップが色々できるようになっています

「Angular6からAngular7にバージョンアップする方法」でもドラッグアンドドロップの方法を記載していますが、その他いろんなドラッグアンドドロップができるようになっていたので試してみました。

DragDropModuleをインポートするのを忘れずにしてください。

cdkDragディレクティブを付けると、その要素はドラッグアンドドロップができるようになるのですが、さらにその親要素にcdkDropListをつけるとcdkDragディレクティブのついた要素をグループ化することが出来るようになり、その要素内でのドラッグアンドドロップが可能になります。

サンプル

テンプレートを以下のようにします。cdkDropList,cdkDragはディレクティブです。

cdkDropListDroppedは、ユーザーがドラッグを終了すると実行されます。

以下、htmlファイルです。

<div cdkDropList class="example-list" (cdkDropListDropped)="dropping($event)">
  <div class="example-box" *ngFor="let i of name" cdkDrag>{{i}}</div>
</div>

以下、tsファイルです。cssファイルは割愛します。

export class AppComponent {

/** なんか子供の名前 */
public name: string[] = [
  '一郎',
  '二郎',
  '三郎',
  '四郎',
  '五郎'
];
/**
 * ドロップしたい！
 * @param event イベント
 */
dropping(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.name, event.previousIndex, event.currentIndex);
}
}

moveItemInArrayは3つの引数を取ります。

• 第一引数…項目を移動する配列
• 第二引数…項目の開始インデックス
• 第三引数…項目を移動するインデックス

リストとリスト間でのドラッグアンドドロップ

cdkDropListディレクティブとcdkDragは基本的に同じ使い方です。

[cdkDropListData]でリストの配列を指定します。

[cdkDropListConnectedTo]で転送したいリストを設定します。

以下、htmlファイルです。

<div class="example-container">
  <h2>名前</h2>
  <div
    cdkDropList
    #list1="cdkDropList"
    [cdkDropListData]="name"
    [cdkDropListConnectedTo]="[list2]"
    class="example-list"
    (cdkDropListDropped)="dropping($event)">
  <div class="example-box" *ngFor="let i of name" cdkDrag>{{i}}</div>
  </div>
</div>

<div class="example-container">
  <h2>名字</h2>
  <div
    cdkDropList
    #list2="cdkDropList"
    [cdkDropListData]="firstName"
    [cdkDropListConnectedTo]="[list1]"
    class="example-list"
    (cdkDropListDropped)="dropping($event)">
  <div class="example-box" *ngFor="let i of firstName" cdkDrag>{{i}}</div>
  </div>
</div>

以下、tsファイルです。

export class AppComponent {

  /** なんか子供の名前 */
  public name: string[] = [
  '一郎',
  '二郎',
  '三郎',
  '四郎',
  '五郎'
  ];

  /** なんか名字 */
  public firstName: string[] = [
  '田中',
  '佐藤',
  '鈴木',
  '本田',
  '日産'
  ];

  /**
   * ドロップしたい！
   * @param event イベント
   */
  dropping(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);
    }
  }
}

transferArrayItemは配列から配列に移動する際に使用するメソッドで、3つの引数を取ります。

• 第一引数…転送する配列
• 第二引数…配置する配列
• 第三引数…現在の配列の項目のインデックス
• 第四引数…項目を挿入するインデックス

サンプル

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^