10/26

* Vue 인프런 강의 복습

1. Vuedraggable 라이브러리 이용

: https://github.com/SortableJS/Vue.Draggable
: 이전 카드 이동 소스를 작성할때 라이브러리 이용 방법에 대한 설명을 적어놓지 않아서, 이번 기회에 다시 정리하려고 소스를 처음부터 다시 뜯어봤다.

- 설치

npm i -S vuedraggable

- Import & 컴포넌트 등록

import draggable from 'vuedraggable'

  export default {
        components: {
            draggable,
        },

- 예제 소스 (카드 이동)

//0.
<draggable
	class="list-item__cardList"
        //1.
	:list="data.cards"
	:data-list-id="data.id"
        //2.
	draggable=".card-item"
        //3.
	group="cardItem"
        //4.
	@end="onEnd"
>
  	 //5.
 	 <card-item
             v-for="card in data.cards"
             :data="card"
             :key="card.pos"
	/>
</draggable>

0. Draggable 컴포넌트로 드래그 앤 드롭 기능을 사용할 태그를 생성한다. => Draggable 컴포넌트는 Div태그로 렌더링된다.
1. :list : for문을 돌릴 배열 데이터를 넣어준다.
2. Draggable : drag할 아이템의 클래스를 넣어준다.
3. group : 자세한 사용법은 모르겠지만 안적었을 경우 드래그 이벤트가 동작하지 않는다! => 드래그할 요소들을 묶어주는 역할..?
4. @End : 드래그가 끝났을때 발생하는 이벤트를 감지한다.
5. Draggable컴포넌튼 안에서 반복적으로 생성할 컴포넌트
   => 이 <card-item></card-item>컴포넌트가 draggable컴포넌트 안에서 드래그 앤 드롭 기능이 적용된다.

2. 리스트 이동 및 draggable 컴포넌트 사용

-