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の基本を理解しなければ、と思うので、次回あたりはまたドキュメントをやりたいなと考えています。

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

page_footer_300rect




page_footer_300rect




-FrontEnd
-

執筆者:


comment

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

CAPTCHA


関連記事

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

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

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

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

AppLink

page_side_300rect

アプリ情報

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

フォロー

follow us in feedly
2018年4月
« 3月 5月 »
1234567
891011121314
15161718192021
22232425262728
2930 

Web版MyCoach

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