【Vue.js】Vue.Draggableを使ってドラッグ&ドロップで並べ替えをする表をつくる方法メモ

2017-11-01


こんな感じでドラッグ&ドロップでソートが出来る表を作りますよー。もちろん、スマホなどのタッチパネルにも対応しています。

準備

まずは、npmでインストールをします

次にVue.jsのmain.js(app.js)に以下の記載をし、Vue.Draggableを使用可能な状態にしておきます

template

ソート可能にしたいリストをコンポーネントでラップします。
draggableはv-modelディレクティブを使用することが可能です。

※今回はタスク画面に表示するサブタスクリストの一覧をソートしたいので、子コンポーネント(sub-task-area)を ラップしています。

なんと、コレだけでv-forで展開したリストを好きなようにドラッグ&ドロップすることができます!しかも変更はv-modelした配列に反映されます。

Vuexを使用している場合

Vuexを使用している場合は、配列をcomputedで取得しているケースがほとんどなので、ソートが反映されません。

ミューテーションにコミットし、Vuex のストアの状態を変更してあげる必要があります。

具体的には、getterを使用し、set時に変更された配列をコミットします。(valに変更された配列がセットされています。)

アニメーションをつける場合

オプションを使用することで、トップに載せたようにヌルヌル動くアニメーションを簡単に付与することができます。

また、スマホでスクロール(フリック?スワイプ?)する事を想定してdelay(遅延)をつけておくと、スクロールしようとしたのに、ドラッグになってしまう!という事が起きにくいと思います。

以下のようにhandleオプションを使ってドラッグ対象の要素をCSSセレクタで指定する方法もあります。(こっちの方が使い勝手いいかな。)

 

イベント発火させたい場合

同じくイベント発生時の挙動を指定したい場合は、v-onにて設定することができます。

optionとイベントはこちらを見ると全部載ってます。

draggableタグがdivになってしまうのウザい場合

draggableタグはブラウザでレンダリングされた際、divとして表示されてしまいます。

テーブルで使う時は<tbody>タグになってもらわないと、デザインが崩れてしまい厄介です。

そんな時は以下のように、:elementで要素指定します。

Vue.Draggableは素晴らしい!

最初はjQuery UIのSortableを使おうとして、最後の最後にスマホ対応していないことに気づき、次にvue-sortableを試してたらVue2.0だと上手く動かず、かなり苦戦していたのですが、Vue.Draggableを使用したらかなり簡単に実装することができました!

教えてくれた会社の先輩方に感謝!

 

 

この記事がお役に立てたら、是非シェアをお願いします^^