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

はじめに

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

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 の設定

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

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」がおすすめ

5/31追記:

個人的に、もしVue.Draggableを使うのであれば、FirebaseなりDBへの保存まで実装したいところ。
試してはいないがなかなかに難しそう。

💻【Vue.js】Vue.Draggableを使って躓いたところ

Sortableというライブラリの拡張らしくこれのイベントを使えるらしい。

💻vue.js+Firebase+vue.draggableな連携 

コメントを残す