はじめに
こんにちは。アプリケーションサービス部の河野です。
今回は、Vue3 でドラッグ&ドロップの UI を簡単に実装できる vue.draggable.next ライブラリの紹介です。
基本的な使い方から応用編としてテーブル間移動の実装方法について記載します。
実装するもの
開発環境
以下エントリーで記載している環境を前提とします。
vue.draggable.nextとは？
ドラッグ&ドロップの Vue3 用コンポーネントです。
任意のリストやテーブルに対して、ドラッグ&ドロップできるUIを追加することが可能です。
デモページから実際の動作を確認することができます。
基本的な使い方
導入
まずは、npm でライブラリをインストールします。（yarn でも可）
npm i -S vuedraggable@next
導入する Vue ファイルにて、インポートします。
import draggable from 'vuedraggable';
コンポーネントは以下のように定義します。
配列の順番も同期されていますね。
プロパティ
よく使いそうなプロパティをざっくり紹介します。
group
group で指定した値が同一のコンポーネント間での移動が可能です。
例えば以下のように複数リストを定義します。group で指定した値が一致しているため、当該コンポーネント間はドラッグ可能になります。
片方の group を 違う値に変更すると、ドラッグできなくなります。
sort
boolean でソート可能（ドラッグ&ドロップで順番を入れ替えることができる）かどうか指定することができます。 （デフォルトは true）
tag
コンポーネントやHTMLタグを指定することで、ドラッグ対象のデータを設定することができます。
デフォルトは div タグが設定されているので、基本的には <template><div> ドラッグする要素 </div></template> で書けばOK。
div タグ
li タグ
move
ドラッグの可否を動的に制御することができます。
例えば、同じ値をドラッグさせたくない場合等に使用できます。
実践
以上を踏まえた上で、複数間テーブルの移動を実装します。
複数テーブル用意して、テーブルのレコード部分を draggable コンポーネントで囲んでいます。
そして、tag に tbody を設定することでテーブル間の移動が可能になります。
Tips
Android でドラッグ対象のテーブル内のコンボボックスが開かない場合
若干マニアックですが、
そんな時は、handle オプションで明示的にドラッグするポインターをつけて、コンボボックスを配置しているセルのみ外せば回避できます。
さいごに
本日紹介したライブラリを使用すれば、比較的簡単にドラッグ&ドロップの UI を実装することが可能です。
ぜひ試してみてください！
swx-go-kawano (執筆記事の一覧)
