この翻訳は不完全です。英語から この記事を翻訳 してください。

HTML のドラッグ & ドロップインターフェイスにより、アプリケーションは Firefox や他のブラウザでドラッグ & ドロップ機能を使用できます。たとえば、これらの機能では、マウスでドラッグ可能な要素を選択し、ドロップ可能な要素に要素をドラッグし、マウスボタンを離すことで要素をドロップできます。ドラッグ操作の間、ドラッグ可能な要素の半透明の表示がマウスポインタに続きます。

Web サイト、拡張機能、XUL アプリケーションでは、ドラッグ可能な要素になる要素の種類、ドラッグ可能な要素が生成するフィードバックの種類、および削除可能な要素をカスタマイズできます。

このドキュメントは HTML のドラッグ & ドロップの概要です。 これにはインターフェイスの説明、アプリケーションにドラッグ & ドロップのサポートを追加するための基本的なステップ、およびインターフェースの相互運用性の要約が含まれています。

ドラッグ&ドロップの基本

ドラッグを開始する時には、いくつかの情報が提供されます。

  • ドラッグされるデータは複数の異なる形式を取ることがあります。例えば、文書のデータは、ドラッグされた文字列を含んでいます。これについての詳しい情報は、ドラッグデータを参照してください。
  • ドラッグしている間、ドラッグフィードバックイメージ(ドラッグ中の内容を示す画像)がマウスポインタの横に表示されます。この画像は任意の物を指定できますが、既定の画像がマウスのボタンが押下された要素の内容から自動的に生成されるため、多くの場合、画像を改めて指定する必要はありません。ドラッグフィードバックイメージについてより詳しく学びたい場合は、ドラッグフィードバックイメージの設定を参照してください。
  • ドラッグの種類を示すことができます。3つの種類が利用可能です: copy は、ドロップ元のデータがドロップ先にコピーされようとしていることを示します。move は、データがドロップ先に移動されようとしていることを示します。link は、ドラッグ元とドロップ先の間に何らかの関連付けや繋がりが作られようとしていることを示します。ドラッグ操作をしている間、ドラッグの種類は、その場所にどの操作が可能なのかを示すために変更されるでしょう。詳細はドラッグの種類を参照してください。

Mozilla と Firefox は、標準のドラッグ&ドロップの仕様に含まれていない多数の機能を実装しています。これによって、複数の項目をドラッグしたり、文字列以外のデータをドラッグしたりすることができます。詳しくは複数の項目のドラッグ&ドロップを参照してください。

ドラッグ&ドロップに使われる一般的なデータ型の一覧は、推奨されるドラッグのデータ型を参照してください。

以下の種類の項目のドラッグについては、良い資料となるクイックリファレンスが利用可能です。

DataTransfer オブジェクトの詳細は DataTransfer を参照してください。

ドラッグイベント

ドラッグ&ドロップ操作の様々な段階で発行される、多数のイベントが利用可能です。ドラッグ操作をしている間は、mousemove のような通常のマウスイベントは発行されず、ドラッグイベントのみが発行されることに注意してください。

すべてのドラッグイベントは、ドラッグ操作に関するデータを dataTransfer プロパティに保持しています。

dragstart
ドラッグが開始された時に、ドラッグが開始された要素において発行されます。ユーザは dragstart イベントが発行された要素のドラッグを求めています。このイベントの間、イベントリスナは、ドラッグされるデータやドラッグ操作に関連付けられた画像の情報をセットするでしょう。これについての詳しい情報は、ドラッグ操作の開始を参照してください。
dragenter
ドラッグ中に、マウスポインタが要素の上に乗った最初の時点で発行されます。このイベントに対するリスナは、その場所へのドロップを許可するかどうかを示します。イベントリスナが無い、あるいは、イベントリスナが何も行わなかった場合、初期状態ではその要素へのドロップは許可されません。ドロップが許可されているかどうかをフィードバックするためにハイライト表示したりドロップ位置のマーカーを表示したりしたい場合にも、このイベントを使用します。詳しくはドロップ対象の明示を参照してください。
dragover
このイベントは、ドラッグ中にマウスポインタが要素の上で動いた時に発行されます。ほとんどの場合、イベントリスナは dragenter イベントの時と同じ処理を行うでしょう。詳しくはドロップ対象の明示を参照してください。
dragleave
このイベントは、ドラッグ中にマウスポインタが要素の上から離れた時に発行されます。イベントリスナは、フィードバック用に表示したすべてのハイライト表示やドロップ位置のマーカーを取り除くでしょう。
drag
このイベントは、ドラッグ操作が行われている間、ドラッグ元の要素(※ dragstart イベントが発行された要素)において定期的に発行されます。
drop
drop イベントは、ドラッグ操作の最後に、ドロップされた位置の要素において発行されます。イベントリスナは、ドラッグされたデータを取り出して、ドロップ位置に挿入する処理を担当するでしょう。このイベントはドロップが望まれた時にのみ発行されます。ユーザがドラッグ操作をキャンセルした場合、例えば Esc キーを押したり、ドロップが許可されていない要素の上でマウスのボタンを放したりした場合には、イベントは発行されません。詳しくはドロップの実行を参照してください。
dragend
ドラッグ元の要素は、ドロップに成功したかどうかに関わらず、ドラッグ操作が完了した時に dragend イベントを受け取ります。詳しくはドラッグの終了を参照してください。

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto, mfuji09, hamasaki, ethertank, Piro, drry
最終更新者: silverskyvicto,