【Vue.js】ドラッグ&ドロップができる「Vue.Draggable」を使ってみた

はじめに

以下の学習教材でVueDraggableを利用したので、使い方に関して簡単にまとめておきます。

Vue.js/Vuexを使ってTrello風アプリを作成しよう！

使い方

Vue CLIで使う

npmでインストール。

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

呼び出し方。(インポートしてコンポーネントとして使う。)

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

group属性を使うことで他のコンポーネントへドラッグ&ドロップさせる、または他のコンポーネントからのドラッグ&ドロップを受け付けることが可能。
(その際は、互いのコンポーネントを同じnameにする。)

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

実践編

やさしめ Vue.js チュートリアル(1) ~ Vue CLI でプロジェクト作成と Linter の設定

こちらのチュートリアルを参考にVueDraggableの実装までしてみました。

yarnでインストール

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

App.vueを編集

- <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
},
~省略~

動作確認

⇓

動きました◎

参考サイト

以下のサイトがとても参考になります。

Vue.jsでドラッグ＆ドロップするなら「Vue.Draggable」がおすすめ