こんにちは、コンサルティングサービス本部の朝日です。
最近のプロジェクトでVue.jsとVue.Draggableを使って便利だったので、 Webでドラッグアンドドロップによる並べ替えを実装したい人のために、簡単に紹介したいと思います。
本記事で使用しているもの
はじめに
元々はSortable.jsが使いたかっただけなのですが、何かしらフロントエンドフレームワークは導入した方が良いだろうとは考えていました。
ただJavascript関連はがっつり追いかけている訳ではないので、正直こんな感じでしたが、とりあえず学習コストが少ないと評判のVue.jsを試してみることにしました。
今回はVue.jsのほんの一部しか使っていないので、そこに絞って紹介しますが、本家サイトに日本語ドキュメントが豊富にあるので詳しくはそちらを参照してください。
Vue.jsのシンプルな例
この例だと、テキストボックスに入力した文字列がリアルタイムに直下のテキストに反映されます。 入力と出力がデータモデルと関連付けられているため、入力→データの変更→出力と自動的に行われていることがわかると思います。
コードの説明
new Vue(){}でVueオブジェクトを作成します。- どの領域に適用するか、elプロパティに設定します。(この例ではid=“app”)
- dataプロパティに管理するデータを定義します。
- inputの値とデータを関連付けるためには、v-modelディレクティブを使用します。
- データ出力は、
{{xxxx}}で記述します。
これだけです。
JSFiddleの説明
この記事ではコードサンプルにJSFiddleを使っています。 JSFiddleではHTMLはbody要素以下を書けばよかったり、scriptタグやwindow.onloadの部分が省略されていますので、素のHTMLで書くときは注意してください。
上記のサンプルの場合は、必要な要素を補完してあげるとこんな感じになります。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="名前を入力してください">
<div>こんにちは！{{name}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script>
window.onload = function() {
var app = new Vue({
el: '#app',
data: {
name : ''
}
});
};
</script>
</body>
</html>
リスト要素を扱う
通常のアプリケーションではリストの内容をループで表示させたいケースが多いと思います。 その際は、v-forディレクティブを使用します。
Javascriptのfor…in文と似ているので特に説明はいらないと思います。 このサンプルでは実装していませんが、当然配列に追加、削除をするとVue.jsが表示内容を更新してくれます。
Vue.Draggableを使ってみる
いよいよVue.Draggableを使った簡単なサンプルです。
と言っても、先ほどのv-forのサンプルをdraggableタグで囲んで:listに並べ替えの対象となるリストを指定してあげるだけです。
それ以外の変更は、少し見やすくなるようにcssを設定したのと、データの変化がわかりやすいように、preタグの中に{{items}}を指定しているくらいで本質的なところではありません。
それぞれのアイテムをD&Dで並べ替えると、データの中身も順番が入れ替わっているのがわかると思います。
グループ指定を使う
応用編です。 2つのリスト間でD&Dできるようにするには、:optionsディレクティブにグループを設定します。 すると同じグループ間で移動ができるようになります。 グループ指定がないとそれぞれのリスト内での並べ替えのみになるので試してみてください。
さいごに
ざっとVue.Draggableの使い方について紹介しました。 実際のアプリケーションではデータの永続化を実装したり、要素の追加、削除やイベントに伴った処理を追加したりすることになると思いますが、表示はVue.jsがやってくれるので、コードはデータモデルの扱いに注力することができ、簡潔に記述できると思います。