Skip to content

Latest commit

 

History

History
28 lines (15 loc) · 2.32 KB

File metadata and controls

28 lines (15 loc) · 2.32 KB

マウスによるドラッグ

ずさんなクリックとクリックの防止🐱🎁

ユーザーがある要素上でマウスを押したとき、そのユーザーがクリックしたのかドラッグしたのか判断できません。また、ユーザーがクリックするときにカーソルが少し動いてしまうことがありますが、これはずさんなクリックです。そこで、ユーザーがマウスを押したまま一定の距離(ドラッグスレッショルド)以上移動した場合にのみドラッグを開始することにしています。ドラッグのしきい値を超えていなければ、ユーザー操作は通常のクリックと同じように行われます。ドラッグのしきい値を超えた場合、そのインタラクションはドラッグとして分類され、標準的なクリック動作は発生しません。

これにより、アンカーなどのインタラクティブな要素をラッピングし、通常のアンカーとドラッグ可能なアイテムの両方を自然な形で利用することができます。

(🐱🎁はシュレディンガーの猫のジョークです)

標準的なブラウザのイベントにどのように影響を与えるかについてのより詳細な情報は、DOMイベントガイドの使用方法を参照してください

キーボードショートカット

ドラッグが発生していないときreact-beautiful-dndは標準的なキーボード操作に影響を与えません(リスナーバインドはありません)。

マウス でドラッグしているときは、次のキーボードショートカットを実行することができます:

  • escape esc - ドラッグをキャンセル

マウスドラッグ中は、以下の標準的なキーボードイベントが発生しないようにし、使い勝手が悪くならないようにしています:

  • tab tab ↹ - タブ化防止
  • enter - 送信防止

これらの明示的に禁止されたキーボードイベント以外の標準的なキーボードイベントは、期待通りに動作するはずです。

←ドキュメントに戻る