[VueJS] vue sortable / draggable 사용하기 (ft. vuedraggable / SortableJS)

jQuery UI에서 제공하는 sortable 기능을 vueJS에서 사용하는 방법에 대해 알아보자.

vueJS에서 사용하려면 사용하는 라이브러리가 존재하는데

 

아래에 해당 라이브러리를 가지고 만들수 있는 데모 사이트가 존재한다.

 

Full demo example : https://david-desmaisons.github.io/draggable-example/

draggable-example

 

이제 하나하나 사용방법에 대해 알아보기에 앞서,

라이브러리를 사용하기 위해서는 필요한 스크립트를 선언해주어야한다.

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

하나 주의할 점은 위 순서대로 놔야 정상적으로 실행되니까 막 놓지 말자.

 

이제 예제를 통해 접해보자.

---

▷ 예제1) 기본 사용법

<div id='it_list'>
  <draggable v-model="list" draggable=".record_list">
      <div v-for="(item,index) in list" class="record_list">
        name : {{item.name}} <br>
        title : {{item.title}} <br>
        index : {{index}}
      <hr>
      </div>
  </draggable>
</div>

new Vue({
  el: '#it_list',
  data: {
    list : [
      {name : "mine" , title : "vue"},
      {name : "it" , title : "v-for"},
      {name : "record" , title : "list"}
    ]
  }
});

 

▷ 결과

 

위 결과를 보면 알겠지만 드래그를 통해 순서 변경이 가능하다.

<draggable> 태그를 통해 draggable="대상" 을 선언해주고 v-model=""을 통해 배열 내부의 순서도 자동으로 변경된다.

 

▷ 예제2) draggable :options 속성 사용법

<div id='it_list'>
  <draggable v-model="list" draggable=".record_list"
    	:options="{ghostClass:'sortable-ghost',animation:150}">
    <div v-for="(item,index) in list" class="record_list">
      name : {{item.name}} <br>
      title : {{item.title}} <br>
      index : {{index}}
    <hr>
    </div>
  </draggable>
</div>

new Vue({
  el: '#it_list',
  data: {
    list : [
      {name : "mine" , title : "vue"},
      {name : "it" , title : "v-for"},
      {name : "record" , title : "list"}
    ]
  }
});

.sortable-ghost {background : yellow;}

 

▷ 결과

 

:options = "{}" 속성을 통해 다양한 옵션을 줄 수 있으며 콤마를 구분자로 여러개를 동시에 줄 수 있다.

각종 옵션에 관한 내용은 아래 링크를 통해 찾아보도록 하자.

 

참고 : https://github.com/SortableJS/sortablejs#options

GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery required.

---

참고 : https://github.com/SortableJS/Vue.Draggable#readme

GitHub - SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js