Vue draggable

Vue draggable  (https://github.com/SortableJS/Vue.Draggable)

move 이벤트를 통해 draggable의 함수 적용 시

=> move 이벤트는 소스 draggable 태그에 작성

=> 타겟 draggable에서는 새로운 아이템이 들어오더라도 move 함수 실행이 작동 x
 => 대신 change 이벤트에 added 이벤트로 접근 가능 (이미 added 된 상태이기 때문에 added 되기 전 이벤트를 감지하지는 못함.)



group의 name으로 드래그-앤-드롭이 가능한 리스트를 식별

pull : 'clone' => 아이템을 뺄 때 '복제'되어 이동 (원본 리스트에서는 삭제 x)
put : false    => 아이템이 드롭 불가능
:sort="false" => 내부 정렬 불가능 속성


move  => return 을 true로 하면 이동 허용, false는 이동 불가
(move 함수내에서 evt.relatedContext.list 내에 중복 element가 있는지 확인하여 중복 여부를 가지고 리스트 중복 제거 가능)

move 이벤트로 접근 가능한 속성은 다음과 같음

• evt.draggedContext : 드래그 한 element의 context 정보 
• evt.draggedContext.index : 드래그한 element의 인덱스 (draggable 태그의 :list(혹은 v-model)과 연결된 data에서의 인덱스
• evt.draggedContext.element : 드래그한 element
• evt.draggedContext.futureIndex : 드롭이 성공했을 때 들어갈 해당 draggable 태그의 :list(혹은 v-model)과 연결된 data에서의 인덱스 

• evt.relatedContext : 드롭 대상 element의 context 정보 
• evt.relatedContext.index : 드롭 대상의element의 인덱스 
• evt.relatedContext.element : 드롭 대상의 element
• evt.relatedContext.list : 드롭 대상의 list 정보 (해당 list 확인을 통해 중복 체크 확인 가능)
• evt.relatedContext.component : 드롭 대상의 VueComponent