ドラッグ&ドロップ
SmartHRに頻出する、ドラッグ&ドロップを使用するUIのパターンやベストプラクティスをまとめています。
用語定義
| 用語 | 定義 |
|---|---|
| ドラッガブル領域 | ユーザーがアイテムをドラッグする操作に反応する領域のことです。この領域には、ユーザーがドラッグ操作を開始できる要素を提供する必要があります。 |
| ハンドル | ユーザーがアイテムをドラッグするための特定のドラッガブル領域のことです。 |
基本的な考え方
ドラッグ&ドロップが必要なUIには、ユーザーを混乱させないように操作に一貫性をもたせつつアクセシビリティを確保することが重要です。
アクセシビリティ
ドラッグ&ドロップのUIを実装する際は、以下のアクセシビリティ要件を満たす必要があります。
- マウスやタッチ入力を使用できないユーザーでも利用できるように、キーボード操作も可能にすること
- インタラクティブな要素を適切に配置し、支援技術で操作できるようにすること
- アクションをキャンセルまたは元に戻す方法を提供すること
種類
カード形式
一般的に、ユーザーがカード全体をドラッグできることを期待する場合、ドラッガブル領域はカード全体になります。
注意点
ドラッガブル領域内にアクションボタンやリンクなどのインタラクティブな要素を含まないでください。支援技術が内側のインタラクティブな要素にフォーカスできないなどの問題が起こります。 こうしたカードの内部にインタラクティブな要素が存在する場合は、ハンドル形式パターンで対応してください。
ハンドル形式
HTMLのインタラクティブな要素がカードの中にある場合は、カード全体をドラッグ操作のためのドラッガブル領域にせず、ハンドルを提供してください。この場合はハンドルのみがドラッガブル領域になります。
ハンドルには「FaGripVerticalIcon（）やFaGripIcon（）」アイコンを使用します。
やむを得ない場合の対応方法
この方法では支援技術の動作に不具合が発生する可能性が高いため推奨しません。
インタラクティブな要素を含むカード全体をドラッガブル領域にしなければならない場合は、カードをdiv要素にして正確なARIA属性とHTMLのdrag-and-drop API別タブで開くを使用してください。
推奨するデザインパターンでの実装が難しい場合は、社内Slack#accessibility_相談で気軽に相談してください。
ドラッグ操作の補足的な操作
キーボードの操作
すべてのユーザーがマウスやタッチ入力を使用できるとは限らないため、ドラッグ&ドロップの操作をキーボードでも可能にする必要があります。
アイテムの位置を変更できるButtonや、DropdownMenuButtonを使って同等の機能を提供してください。
Buttonで提供している。 
DropdownMenuButtonで提供している。 
アクションのキャンセル操作
ユーザーがアイテムをドラッグしている最中にEscapeキーを押した場合、そのドラッグをキャンセルして、アイテムがドラッグ前の状態に戻るようにしてください。
ドラッグ最中のキャンセルができない場合は、ドラッグ完了後に元に戻せるようにしてください。これは、元に戻すボタンやDropdownMenuButtonで提供します。
ドラッグ最中のキャンセルと、ドラッグ完了後に元に戻す機能を両方実装しても良いです。
視覚的フィードバック
ユーザーがドラッグ&ドロップ操作を直感的に理解できるように、適切な視覚的フィードバックを提供する必要があります。
ドラッグ領域の状態の表示
ユーザーがどの要素をドラッグできるかを明確にするため、以下の視覚的な手がかりを提供します。
- ハンドルにカーソルを合わせたときに、カーソルを
grabに変更してください。
ドラッガブル領域の状態の表示
ドラッガブル領域を明確にするため、以下の視覚的な手がかりを提供します。
- ドラッガブル領域にカーソルを合わせたときに、カーソルを
grabに変更してください。 disabled状態のアイテムはドラッグできないことを明確にためにカーソルをnot-allowedに変更してください。
ドラッグ中の視覚的フィードバック
ユーザーがアイテムをドラッグしている間、以下の視覚的フィードバックを提供します。
- カーソルを
grabbingに変更して、ドラッグ中であることを示す - ドラッグ中のアイテムに視覚的な変化を加える（例：透明度を下げる、影を追加する）
- ドラッグ元の位置にプレースホルダーを表示して、元の位置を示す