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

こんにちは株式会社SCOUTERでフロントエンドエンジニアをしているhirokinishizawaです。

以前機能開発でドラッグアンドドロップを行えるようにするという開発を行いました。そこでVue.Draggableを使用することになったのですが躓いたところがあったのでメモとして残していければと思います。

成果物

ドキュメント github.com

インストール

yarn add vuedraggable
又は
npm i -S vuedraggable

構成

実際の機能とは少し違うのですが近い感じの構成で簡単に作成してみました。

<template>
  <div class="conteiner">
    <div 
      v-for="(list, key) in lists" 
      :key="key" 
      class="lists">
      <div class="list-wrapper">
        <draggable 
          :options="{group:'group', animation: 150}" 
          class="draggable"
          @start="draggableStart"
          @end="drag=draggableEnd">
          <div 
            v-for="item in list" 
            :key="item.id"
            class="list" >
            {{ item.name }}
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      lists: [
        [{ name: 'aaa', id: 1 }, { name: 'bbb', id: 2 }, { name: 'ccc', id: 3 }],
        [{ name: 'ddd', id: 4 }, { name: 'eee', id: 5 }, { name: 'fff', id: 6 }],
        [{ name: 'ggg', id: 7 }, { name: 'hhh', id: 8 }, { name: 'iii', id: 9 }],
        [{ name: 'jjj', id: 10 }, { name: 'kkk', id: 11 }, { name: 'lll', id: 12 }]
      ]
    }
  }
  methods: {
      draggableEnd(event) {
          console.log(event)
      }
  }
}
</script>

躓いたところ

画像のように今回いくつかの列に別れて縦移動のみではなく横移動もできるようにしました。 ドキュメントを読めば縦横のドラッグアンドドロップをできるようにするのはとても簡単に出来るかと思います。今回保存移動後にデータベースに移動先、順番を保存をしなければいけなくサーバーサイドに渡すものとして横移動をした際に｀移動前の列,移動先の列｀が必要で、この情報をどこからとってくるのかで躓きました。

解決策

Vue.DraggableはSortableというライブラリを拡張したもので、Sortableのイベントを使えます。イベントの種類はこちらに書いてありますがstart, add, remove, update, end, choose, sort, filter, cloneがあり、今回使用するのはendイベントになります。

イベントの中身をconsoleで吐き出すと以下のようなデータが吐き出され

from(移動前),to(移動先)があるので次に

draggableEnd(event) {
      console.log(event.from)
      console.log(event.to)
}

としたところhtmlが返ってきました。

先程も言ったように列の情報がほしいのですが、3列目と4列目を区化するものがなく仕方なく、

<draggable 
          :options="{group:'group', animation: 150}" 
          class="draggable"
          @start="draggableStart"
          @end="drag=draggableEnd"
          :data-column-id="key">

data-column-idを持たせることでevent.to.data-column-idで移動先の列と移動前の列の差分を取ることができました。

他にいいやり方が合ったかもしれないですが分からなかったのでわかる方いたら教えていただきたいです！

最後に

エンジニア、デザイナーの採用を行っております！

デザイナー、エンジニアの皆さん興味のある方はご応募お願いします！

www.wantedly.com

www.wantedly.com

www.wantedly.com