vue-draggable 사용법 정리 (1) - 기본 코드 및 예시

import draggable from "@/vuedraggable";

 

원하는 페이지에 위처럼 import를 해줘야한다.

 

만약 다운을 받지 않은 상태라면 npm i  vuedraggable --save 를 해주자. 본인이 npm5를 사용한다면 --save는 빼줘도 된다.

 

만약 --save에 대해 궁금하다면 아래의 블로그에서 설명을 잘해주시니 참고하자.

 

https://xtring-dev.tistory.com/11

[NPM] npm install 할 때 --save 옵션을 함께 입력하는 이유? 하지만 이제는 사용하지 않아도 되는 이유.

 

https://sortablejs.github.io/Vue.Draggable/#/custom-clone

vuedraggable

 

위는 공식 예제를 담은 사이트이다. 굉장히 다양한 옵션과 예들이 있지만 섬세한 드래그 기능을 구현할 것이 아니라면 clone과 데이터 이동을 어떤 곳으로 할지만 결정하는 것이 좋을 것이다.

 

다양한 옵션들을 쉽게 설명한 글을 보고 싶다면 아래의 블로그를 들어가면 설명을 잘 해두셨다.

 

기본 내용을 원한다면 내가 작성한 글과 공식 예제를 보면 쉽게 사용할 수 있을 것이다.

 

https://theheydaze.tistory.com/316

09. Vue 2 - vuedraggable 2.24

 

  data() {
    return {
      list1: [
        { name: "John", id: 1 },
        { name: "Joao", id: 2 },
        { name: "Jean", id: 3 },
        { name: "Gerard", id: 4 }
      ],
      list2: [
        { name: "Juan", id: 5 },
        { name: "Edgard", id: 6 },
        { name: "Johnson", id: 7 }
      ]
    };
  },

위 처럼 원하는 데이터 배열을 작성해준다. 물론 2개 이상이어도 상관없다.

 

 <draggable
        class="dragArea list-group"
        :list="list1"
        :group="{ name: 'people', pull: 'clone', put: false }"
        @change="log"
      >
        <div
          class="list-group-item"
          v-for="element in list1"
          :key="element.name"
        >
          {{ element.name }}
        </div>
      </draggable>
    </div>

    <div class="col-3">
      <h3>Draggable 2</h3>
      <draggable
        class="dragArea list-group"
        :list="list2"
        group="people"
        @change="log"
      >
        <div
          class="list-group-item"
          v-for="element in list2"
          :key="element.name"
        >
          {{ element.name }}
        </div>
      </draggable>
    </div>

 

중요하게 봐야하는 것은 group이다.  group에 설정한 값이 동일해야지만 list끼리의 이동이 가능하다.

 

또한 pull: 'clone'을 하게되면 해당 리스트에 값은 보존되지만 드래그되는 li 객체는 복제되어 다른 리스트로 옮길 수 있다.

 

put: false로 해두면 들어오는 값을 막아 복제만 가능한 리스트로 만들 수 있다.

 

물론 true로 설정하면 값을 받아올 수 있다.

 

-- 위 코드는 vuetify를 이용한 것으로 일반 사용자가 사용할때는 본인이 원하는 레이아웃을 작성하면 된다.

 

기본적인 내용이니 심화과정은 본인이 example을 보면서 연구하는 것을 추천한다.

 

method에서 this.list로 원하는 배열을 불러와 @change가 작동할때 수행하는 함수를 작성하면 동일한 값 제거, 값 변경 등등이 가능할 것이다.

 

  cloneDog({ id }) {
      return {
        id: idGlobal++,
        name: `cat ${id}`
      };
    }

위 코드를 @change에 실행되게하면 clone되는 요소의 데이터에 접근할 수 있다. 유용한 코드이니 vue-darggable을 사용할때 기억해두자.

 

 

드래그하는 객체의 list 값을 불러오거나, 삭제하는 코드는 다음에 작성하겠다.