FrontEnd

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

投稿日:2018年4月26日 更新日:

はじめに

久しぶりにVue.jsの記事を書きます。
TrelloやGithubのカンバンのようなタスク管理を作りたいと考え、良い感じのライブラリないかな、と探していたところ、vue-draggableを見つけました。
https://github.com/SortableJS/Vue.Draggable

Sortable.jsがベースのようで、かなり簡単にドラッグ機能が実装できます。
今回はこちらのライブラリを紹介したいと思います。

準備

今回もJSFiddleを使用します。
しばらく使ってませんでしたが、リニューアルしてましたね。
JSフレームワークをVueで選択しておけば、あとはそのままで良さそうです。

見た目を良くするために、Materializeを使用しています。
CDNのURLをResourcesに登録します。

また、今回の主役でもあるvue-draggableも登録します。
CDNを使いますが、 npm や yarn を使用する場合は、下記でインストールできます。

一列の並び替え

tasksというプロパティに配列でタスクを定義して、それを v-for でループさせています。ただ、そのリスト要素を <draggable> というカスタムタグで囲んでいます。
これが、ドラッグ可能な領域を定義しています。

:list はこの領域の配列プロパティを指定します。
今回は tasks になります。
class はHTMLのclass要素です。

これだけで、ドラッグ機能による並べ替えが実装できます。

移動する前、移動した後

移動する前に、その要素が移動可能かチェックしたい、
または移動した後にローカルストレージやサーバーに保存する、といったことをしたくなると思います。

このためのイベントも用意されています。
先ほどのサンプルを少し修正しました。

move

moveは動かすタイミングで発火するイベントです。
例では、「Meeting」だったら動かさないようにしました。

コールバックメソッドでBooleanを返すことで、動かして良いのか悪いのか許可させることができます。
試していただくと分かると思いますが、「Meeting」を動かしても元の位置に固定されていると思います。

後述する end とは違い、カスタムタグ内では :move で指定することも注意が必要です。
コールバックメソッドの引数で取得できるプロパティは下記をご参照ください。
https://github.com/SortableJS/Vue.Draggable#move

end

動き終わった後の end もあります。
他にも動き出しの start も用意されています。

今回の例では、動き終わったら alert を出すようにしました。
move とは違って、コールバックメソッドの引数のプロパティが違うので、注意が必要です。
また、カスタムタグ内では @end で定義します。

2列間の移動

少しTrelloに近づけるため、2列間でタスクの受け渡しをしたいと思います。

左列から右列、右列から左列に移動できるかと思います。
また、ちゃんとイベントも発火します。

方法としては、まず2つのプロパティを用意し( unfinishedTasksfinishedTasks )、それぞれの行でこれらを表示させます。

また、カスタムタグである draggable は下記のようにしてあります。

:options で色々オプションを設定できるのですが、今回は group を使いました。
これは、それぞれの配列がどのグループに属するか定義し、配列間の受け渡しをするようにします。
これを設定しておかないと、左列から右列、右列から左列への移動ができなくなります。

片方を空配列にすると。。。

片方を空配列にすると、(そのままでは)移動できないようです。
Sortable.js のコードを読んだ訳ではないですが、恐らく割り込み要素から挿入位置を計算しているため、割り込み先がいないと計算できないのではないかと推測しています。

私は、ダミーで1つ動かない要素をつけて対応しましたが、もっと良い方法がありそうです。
(もしくはモジュール内にオプションで存在している。)

さいごに

今回はモジュールの紹介でした。
触っていると、もう少しVue.jsの基本を理解しなければ、と思うので、次回あたりはまたドキュメントをやりたいなと考えています。

このモジュールをインポートして、コンポーネント内で使用する場合は、カスタムタグの宣言が必要そうです。
もし、「こんなタグ知らないよ」みたいなエラーが出たら、下記のコードを追加してみてください。

おすすめ書籍

基礎から学ぶ Vue.js  Vue.js入門 基礎から実践アプリケーション開発まで  Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

もうすぐ登場!Vue 3の変更点まとめ

1 はじめに2 仕様変更2.1 複数のv-modelが定義可能に2.2 template直下に複数のタグを記述可能に2.3 開始処理がcreateAppに2.4 scoped cssの仕様変更2.5 ...

フォロー

follow us in feedly

blog-page_side_responsive

2018年4月
1234567
891011121314
15161718192021
22232425262728
2930 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。