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


関連記事

ウチのMaterialize事情

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

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サ ...

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 ...

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

フォロー

follow us in feedly

page_side_300rect

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

アプリ情報

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