[라이브러리]cdk/drag-and-drop : 드래그&드롭 기능

# 개요

@angular/cdk/drag-drop 라이브러리란, material.angular.io 에서 공식적으로 제공하는 드래그&드롭 Angular Module이다.

# 설치방법

npm install --save @angular/cdk

# 사용법

1. DragDropModule을 NgModule 내에 import

2. X.component.html 상에서 적용

<!--가장 기본 리스트-->

<div cdkDropList [cdkDropListData]="list" *ngFor="let list of lists" (cdkDropListDropped)="drop($event)">

  <div cdkDrag [cdkDragData]="item" *ngFor="let item of list"></div>

</div>

<!-- 서로 이동 가능한 리스트 -->

<div cdkDropList #listOne="cdkDropList" [cdkDropListConnectedTo]="[listTwo]"></div>

<div cdkDropList #listTwo="cdkDropList" [cdkDropListConnectedTo]="[listOne]"></div>

<!-- 서로 이동 가능한  N개 이상의 리스트 -->

<div cdkDropListGroup>

  <!-- All lists in here will be connected. -->

  <div cdkDropList *ngFor="let list of lists"></div>

</div> 

<!-- 오래 클릭했다가, 드래그 가능하게 하기-->

<div class="example-box" cdkDrag [cdkDragStartDelay]="1000">

  Dragging starts after one second

</div>

<!-- 이동 가능한 리스트간 데이터 전송 -->

drop(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);

    }

  }