ひよっこエンジニアの雑多な日記

とあるプログラミングスクールで働くひよっこエンジニアが覚えたことや悲しみを記すブログ

【Vue】Vue.Draggableを使ってサクッとTrelloっぽいものを作る

お久しぶりです。超久しぶりです。
ブログ書くのめっちゃさぼっていました…

久々にちょっと時間があったのと、お勉強で触ったVue.Draggableがとってもお手軽便利だったので紹介します!

Vue.Draggableとは

Vue.Draggableはドラッグ&ドロップでリストを並び替えすることをお手軽に実装できるライブラリです!
Sortable.jsをVueコンポーネントで扱えるようにしたライブラリのようです。

github.com

これを使うことでサクッと並び替えのできるリストが実装できます!

導入

まずはVueプロジェクトを作ります。
vue-cliを使ってサクッと作ります。
プロジェクトの名前は任意で問題ありません。(今回はvuedraggable-sandboxとします)

$ vue create vuedraggable-sandbox

プロジェクトができたらVue.Draggableを導入します。
(今回はyarnを使用します)

$ yarn add vuedraggable

とりあえずサクッと試したいのでsrc/App.vueにVue.Draggableをimportしてリストを作ってしまいます。
使用しないのでHelloworld系のものは消してます。

// src/App.vue
<template>
  <div id="app">
    <draggable element="ul">
      <li v-for="task in tasks">{{ task }}</li>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'app',
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        'task1',
        'task2',
        'task3',
        'task4',
      ]
    }
  }
}
</script>

importしたvuedraggableはcomponentsに配置します。
また、リストのデータとしてdataにtasksという配列を設定しておきます。

templateの部分で記載している

<draggable element="ul">
  <li v-for="task in tasks">{{ task }}</li>
</draggable>

の部分がVue.Draggableを使用している箇所です。
draggableタグで指定しているelementはdraggableの部分をなんのタグにするかを指定しています.(デフォルトはdiv)
draggableで囲って並び替えのしたい要素をv-forで出力するだけで並び替えの仕組みは実装されます。

f:id:kimuraysp:20180408142405g:plain

わかりやすくするために少しCSSを調整しています。
たったこれだけでドラッグ&ドロップで並び替えできるリストが作れます。

Trelloに近づける

これだけだとまだTrelloっぽさからは少し遠いですね。
なので列を増やして、縦の移動だけではなく横の移動もできるようにします。

列を表現するためにtasksを二次元配列にします。

data() {
  return {
    tasks: [
      ['task1-1', 'task1-2', 'task1-3', 'task1-4'],
      ['task2-1', 'task2-2', 'task2-3', 'task2-4'],
      ['task3-1', 'task3-2', 'task3-3', 'task3-4']
    ]
  }
}

またdraggableの部分を以下のように修正します。

<draggable :options="{ group: 'tasks' }" element="ul" v-for="list in tasks">
    <li v-for="item in list">{{ item }}</li>
 </draggable>

optionsでgroupにtasksを設定することで、tasksの中にある配列間での要素移動ができるようになります。
またdraggableのところでtasksをv-forで回すようにします。

これだけで列間での移動もできるようになります。

f:id:kimuraysp:20180408142424g:plain

実際にTrelloっぽいものを作るとなるとAPI連携があったり、タスクの追加ができたりという機能も必要ですが並び替えについてはたったこれだけでできるようになってしまいます!
世の中末恐ろしいです…

今回のブログを書くのに使用したサンプルは以下になります!

github.com

さいごに

世の中便利なものがいっぱいです
どう道具を使うかを考えることがとりあえずものを作る上では重要なのかもしれません