【Bubble開発】ドラッグ＆ドロップ実装時の画面遷移によるデザイン崩れの対処法

Bubbleの「Draggable Elements」プラグインを使えば、ユーザーが要素をドラッグ＆ドロップして並び替えを行えるUIを実現できます。

ただし、ドラッグ中にページ遷移が発生すると、画面が崩れるバグが発生することがあります。

この記事では、そのバグの内容と対処法を解説します。

実装手順

1. ドラッグ対象のGroupにDraggable属性を設定
2. ドロップ先エリアを定義
3. ドラッグ対象Groupをクリックしたときの遷移設定を追加
4. ドラッグ中は画面遷移しない条件を追加（バグ対策）

実装方法

今回ドラッグ＆ドロップの実装をするにあたって利用したプラグインは「Draggable Elements」です。

下記手順では、プラグイン「Draggable Elements」の設定から解説します。

ドラッグ対象GroupにDraggableを設定

• 対象：ドラッグの対象エレメントやグループ
• 設定方法：
  • プラグインのドラッグ属性を対象Groupやエレメントに付与（通常は属性パネルで設定）
  • Draggable IDの設定は、動的な要素を使って個別化

ドロップエリアの定義

• DropAreaを画面内に設置し、ドラッグ可能要素がこのエリア内でのみ移動できるように設定します。
• ドラッグ後の並び順更新は、ワークフローでDB更新処理を行います。

画面遷移のワークフローを設定

• 対象：対象のグループもしくはエレメントがクリックされたとき
• アクション：Go to page（編集ページへ）
• パラメータ送信：対象ToDoの unique id を渡すことで、編集対象が特定されます

ドラッグ中は画面遷移を抑制する（バグ対策）

今回起きていたバグ

• ユーザーが対象項目をドラッグしている最中に、そのまま誤ってクリック扱いになると画面遷移が発生
• 結果、ドラッグ処理が中断され、デザインが崩れる

対処法

「Group Todo_全部 is clicked」ワークフローの 「Only when」 条件に、以下の条件式を追加する

Only when → Drag/dropGroup todo_全部 is dragged is “no”

これにより、ドラッグ操作中はクリックイベントが発火せず、意図しない画面遷移が発生しなくなります。

補足：なぜこのバグが起きるのか？

Bubbleの「Draggable Elements」プラグインは、ドラッグ処理とクリックイベントの区別が曖昧なケースがあり、ドラッグ中にクリックイベントが同時に発火することがあります。その結果、未完了のドラッグが原因でレイアウトが乱れるというバグが起きます。

その対策として「ドラッグ中は画面遷移やクリックアクションを制限する」ことが最適です。

以上のひと手間を加えることで、デザイン崩れを防ぐことができます。

• Bubbleでドラッグ＆ドロップ機能を使う際は、ドラッグ中の画面遷移に要注意
• 「Only when」で is dragged is no 条件を入れることで、安全にクリック処理と切り分けられる
• Draggable Elements プラグイン利用時は、UIの状態管理を丁寧に行うことがバグ防止に繋がる