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

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

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

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

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

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

サンプル

コメント

タイトルとURLをコピーしました