【Bubble】ドラッグ＆ドロップで自由自在に並び替え！ToDoリストもカンバンも思いのまま✨

Bubbleで直感的な並び替え機能を実装したいあなたへ！ 今回はドラッグ＆ドロップで要素を自由自在に並び替えする方法を、カテゴリリストを例に徹底解説します。カンバン方式のタスク管理にも応用可能！

具体的な利用シーン

ドラッグ＆ドロップによる並び替え機能は、タスク管理アプリや商品リスト、ユーザーの好みの順序でアイテムを並び替えられるインターフェースを提供する際に非常に有用です。

例えば、タスク管理アプリでタスクの優先順位をユーザーが自由に変更できるようにすることで、使い勝手が向上します。また、ECサイトで商品リストをドラッグして並び替えることで、購入意欲を刺激することも可能です。

完成イメージ

今回はこのようにカテゴリをマウスドラッグで移動させる実装をしてみたいと思います。

結構面倒ですが、かなりシンプルなケースにしていますのでまずは実装してみると何となく、どうやって動いているかが具体的にわかってくると思います。
がんばりましょう

手順

並び替え用のプラグインをインストール

Bubbleのプラグインマーケットから「Draggable Elements」のドラッグ＆ドロップ用のプラグインをインストールします。

データベースの設定

カテゴリリストを並べ替える実装をするため、以下のようなテーブルを作成します。
ここでのポイントは”Order Number”を登録することです。この”Order Number”の順番で表示を行います。

リピーティンググループの設定

並び替え対象のアイテムを表示するために、リピーティンググループを作成します。

• リピーティンググループをドラッグ＆ドロップしてキャンバスに配置します。
• リピーティンググループのデータソースを設定します（ここではカテゴリ）。
  Sort byはOrder Numberを昇順になるように設定します。

ドラッグ可能な要素の設定

リピーティンググループ内のアイテムをドラッグ可能にするための設定を行います。

• プラグインのDrag/drop Groupのコンテナをリピーティンググループの中に配置します。
• Make this element droppableはチェックしてください。
• Behavior post dropはMove backにしてください。
• Type of contentはドラッグしたい項目（ここではカテゴリ）を設定します。
• 以下の図には記載していませんが、配置したDrag/dropGroup内にカテゴリ名を表示するよう、Textを配置しておいてください。

ドロップエリアの設定

アイテムをドロップするエリアを設定し、ドロップ後の処理を定義します。
アイテム（今回はカテゴリ）をこのエリアにドロップすると順番が変わることになります。

• プラグインのコンテナ DropAreaを先ほど作成したDrag/dropGroupの上下、それぞれに配置します。
  グレーの色が配置したDropAreaになります。わかりやすいようにDrop/drag groupの上側をDropArea Above,下側をDropArea Belowをいう名前にしておきます。

非表示項目の設定

並び替えで必要となる順番を保持する為に利用する非表示項目を作成します。カテゴリ名が設定されているDrag/drop groupの上に2つ（InputとGroup)、下に2つ(InputとGroup)を設定します。
この4つは表示しなくてもよいので”This element is visible on page load”のチェックを外しておいてください。

• Drag/drop groupの上にInputフォームを配置します。左上の小さいのがInput elementです。
  Initial contentはCurrent cell’s index-1としてください。

• 次にDrag/drop groupの上に新たにグループを配置します。Data sourceは以下のような設定となります。

• これらとどうようのものをDrag/drop Groupの下側にも登録します。
• まず、Inputフォームを設置し、以下のようにInitial contentにcurrent cell’s index+1を設定します。

• 次にDrag/drop Groupの下側にグループを配置し、Data sourceを以下のように設定します。

• これはとても重要なのですが、下側のGroup Below NumberのConditionalに以下を設定します。一番下のelementの場合に動作がおかしくならないように考慮するための処理になっています。

なかなか面倒で分かりにくいと思いますが、全体のレイヤーはこのようになります。カテゴリ名を表示するテキスト以外は同じレイヤーに配置されています。

Workflowの設定

カテゴリの上下に設置したDropArea Above, DropArea BelowにDrag/drop Group(カテゴリ)がおかれた場合にOrderを書き換える処理を実装します。

• eventは”A drop area has a group dropped on it”を選択します。

• アクションはこのようにデータベースのOrder Numberを変更します。
  ややこしいですが、Thing to changeにあるCurrent Workflow’sカテゴリはドラッグして持ってきたカテゴリになります。

• 下側にドラッグした場合の処理は最終行とそれ以外で処理が微妙に違います。それぞれで分けた処理を実装します。
• 最終行以外にドラッグした場合

• 最終行にドラッグした場合

これでうまく動作しているはずです。

ドラッグしてドロップするエリアがどこかがわかるように色を変えるなどの処理をするとUI的にもよくなるかと思います。

まとめ

Bubbleを使用してドラッグ＆ドロップによる並び替え機能を実装する手順を紹介しました。この機能はユーザーエクスペリエンスを向上させるだけでなく、アプリケーションの操作性を大幅に高めることができます。ぜひ、あなたのプロジェクトにもこの機能を取り入れてみてください。

ドラッグ＆ドロップによる並び替えは、ユーザーが直感的に操作できるインターフェースを提供し、使い勝手の良いアプリケーションを作成するための強力なツールとなります。是非チャレンジしてみてください！

4o