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 ベースのフレームワークによるシングルページアプリケーション開発

page_footer_300rect




page_footer_300rect




-FrontEnd
-

執筆者:


comment

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

CAPTCHA


関連記事

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

フォロー

follow us in feedly

AppLink

英語

page_side_300rect

2018年4月
« 3月 5月 »
1234567
891011121314
15161718192021
22232425262728
2930 

アプリ情報

目標を達成したい方を応援する、TODOアプリもリリースしております。 下記のアイコンから無料でダウンロードできます。

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。 下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。