初めに

こんにちは。 Uniforce株式会社でフロントエンドを担当している、浅川です。

今回は、ドラッグ&ドロップ機能のあるカンバンボードを実装した際に、vue.draggable.nextを利用して実装したことについて書きたいと思います。

機能実装時はVue2系で実装していたのですが、Vue3に移行したため、Vue3での実装の仕方を紹介します。

開発環境

Nuxt3 + Vue（v3.4.15） + vue.draggable.next（v4.0.1）

インストール

弊社ではnpmを利用しているため、下記コマンドでインストールします。

npm i -S vuedraggable@next

そのほかについては、githubのinstallationから確認してみてください。

コンポーネント読み込み

draggableをコンポーネントとして、利用するためにdefineNuxtPlugin で読み込んでおきます。

import Draggable from 'vuedraggable'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Draggable', Draggable)
})

使い方

使い方は簡単で、ドラッグさせたいコンポーネントを<draggable>で挟むことで簡単にドラッグ＆ドロップが実装できます。

Vue3からは、draggableタグ以下にtemplateでドラッグさせたいコンポーネントを囲む必要があります。

templateのelementはv-modelに設定した配列のアイテムが入ってきます。

item-keyはループ要素のkey値になります。

Vue2

<draggable v-model="myArray">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

Vue3

<draggable v-model="myArray" item-key="id">
  <template #item="{element}">
    <div>{{element.name}}</div>　// ドラッグさせたいアイテム
   </template>
</draggable>

Event

draggableにはイベントが複数あります。

ドラッグ完了後など、タイミングによって発火したいイベントが違うときに下記から選択する必要があります。

start

ドラッグ開始

add

要素追加時

remove

要素削除時

update

ドラッグでの要素の移動完了時

end

ドラッグでの要素の移動が完了した際の最後に発火される

choose

ドラッグ要素を選択したとき

unchoose

ドラッグ要素を選択から外したとき

sort

並び順を変更した際updateとendの間で発火

filter

フィルターされた際

clone

ドラック時に生成されるシャドークローン生成時

実装

実際の実装では下記のような感じにしています。

<draggable
　:list="myArray"
  :group="groupTag"
  :animation="300"
  :sort="false"
  item-key="id"
  handle=".item_class"
  >
	  <template #item="{ element }">
	    <div class="item_class">
		    // ドラッグしたい内容
      </div>
	   </template>
</draggable>

group: 複数のボードがある場合、同じgroupタグを持っているボード内だけでドラッグ&ドロップができるように制御します。

animation: ドラッグ&ドロップ時のソートアニメーションの速度をミリ秒で指定できます。

sort: 自動のソーティングを無効にしています。日時やIDによるソートをしたい場合などにfalseを指定しておくといいと思います。

handle: 指定しているクラスの範囲をドラッグ領域にすることができます。

最後に

ここまで読んでいただきありがとうございます。

vue.draggableを利用することで、簡単にドラッグ&ドロップの機能を実装することができました。

イベントも充実しているので、細かい調整をすればある程度のやりたいことができそうです。