[#. Vue] Vue Draggable을 이용해서 리스트 드래그로 순서 바꾸기 list drag and sort

 

 

 

 

 

 

 

Vue로 이렇게 Todo 웹 어플리케이션을 만들었는데

할 일 목록 순서를 자유자재로 바꾸고 싶다

Vue.Draggable을 이용해서

list를 drag and drop 해서 순서를 바꿔보자 

 

 

 

 

 

 

github.com/SortableJS/Vue.Draggable

SortableJS/Vue.Draggable

 

 

 

 

 

① vuedraggable 설치

 

npm install --save vuedraggable

 

 

 

 

 

② vue 파일 script에 vuedraggable import 하기

 

<script>
import draggable from 'vuedraggable'

  export default {
    components: {
      draggable
    },
    ...
  }
</script>

 

 

 

 

 

③ vue 파일 template 세팅

 

<draggable v-model="myArray">
    <transition-group>
        <div v-for="(todoItem, index) in propsdata" v-bind:key="index">
            {{todoItem.item}}
        </div>
    </transition-group>
</draggable>

 

 

 

 

 

 

 

드래그하면 리스트 이동이 잘 된다