[vue.js] vuedraggable.js로 드래그 구현하기

vue draggable

프로젝트에 기존에 드래그 앤 드랍 때문에 dragula 라이브러리를 도입했지만, json 데이터 정렬과, vue plugin 제한으로

새로운 라이브러리를 찾는 도중 vue-draggable 라이브러리를 찾았다.

해당 라이브러리는 wrapper 로 감싸서 사용하는 방식이며. 굉장히 간단하다.

1. 설치

npm install vuedraggable

 

2. 적용

import draggable from 'vuedraggable';

export default {
	name: 'list',
    components:{
    	draggable
    },
	
    <...중략>	
}

<draggable :list="stageInfoList">  
  <transition-group name="list-complete">
    <div v-for="(item, index) in this.$props.themeListData" :key="item" class="drag-item">
       <stage-info></stage-info>
    </div>
  </transition-group>
</draggable>

실제 보여줄 드래그해서 움직일 데이터 바인딩을 :list를 통해서 바인딩시켜주며, 트랜지션 효과를 먹이고 싶으면

<transition-group>을 적용하며, 필요없으면 생략하면 된다.

실제 보여줄 리스트를 draggable 컴포넌트로 감싸는게 핵심.

반드시 데이터 뿌려주는 곳의 key값는 중복되지 않아야한다..

위 코드의 :key="item" 부분을 아래와 같이 하면 

:key = "item+index" 

작동을 안한다. 반드시 키값은 고유한값으로 해주어야 한다. 

그렇치 않을 경우 아래 스테이지를 드래그해서 위치 옮기면, 키값으로 설정해 놓은 부분이 같을 경우

해당 내용까지 전부 변해버리는 불상사가 일어난다.

키값을 따로 주기위해 데이터 구조를 아래와 같이 변경함.

//기존
{
 title: "육",
 content: "",
 type: "",
 stageNo: 1,
} 

//변경
{
 index: "3-1",
 title: "육",
 content: "",
 type: "",
 stageNo: 1,
} 

:key="item.index"

객체별로 고유 키값을 설정한 후 key 값을 주면 이상없이 작동한다.

참고자료 : https://codesandbox.io/s/vue-draggable-example-p6vnr