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

Angular7からドラッグアンドドロップが色々できるようになっています
1. リストとリスト間でのドラッグアンドドロップ
2. 関連

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つの引数を取ります。