はじめに
以下の学習教材で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
},
~省略~動作確認
⇓
動きました◎
参考サイト
以下のサイトがとても参考になります。