[Vue.js] 끌 수 있는 "Vue.Draggable"을 사용해 봤습니다.

입문

사용 방법

Vue CLI용

$ npm i -S vuedraggable
$ yarn add vuedraggable # yarnの場合

<template>
  <draggable>
    <!-- ★ここにドラッグ&ドロップさせたいコンポーネントを挿入 -->
  </draggable>
</template>
<script>
import draggable from 'vuedraggable'

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

<draggable group="name">
  <!-- ★ここにドラッグ&ドロップさせたいコンポーネントを挿入 -->
</draggable>

실천편

$ yarn add vuedraggable
$ npm i -g yarn # yarnコマンドが打てない場合はまずはこちらでyarnを導入

- <template v-else>
+ <draggable v-else>
 <VsRow v-for="todo in todos" :key="todo.id" vs-w="10">
   <TaskCard :id="todo.id" :text="todo.text" @remove-task="remove" />
  </VsRow>
- </template>
+ </draggable>

~省略~

<script>
  import TaskCard from "@/components/TaskCard.vue";
+ import draggable from 'vuedraggable'

export default {
    name: "App",
    components: {
      TaskCard,
+     draggable
    },

~省略~

웹 페이지 정보