Learning about Drag and Drop?
After reading this article, head over to the Dev Derby to show the world what you can do!
Firefox や他の Mozilla アプリケーションは、ドラッグ＆ドロップ操作をハンドリングするための多くの機能をサポートしています。これにより、ユーザがある要素の上でマウスのボタンを押下して、そのまま他の場所にドラッグし、そこでマウスのボタンを放してドロップする、という操作を実装することができます。ドラッグ操作をしている間は、何をドラッグしているのかが分かるように、マウスポインタの下にドラッグ元の要素が半透明で表示されます。別のアプリケーションに対してドロップすることもできます。 Web サイトや拡張機能、XUL アプリケーションはこの機能を、要素をドラッグ可能にしたり、要素がどの場所にドロップできるのかをユーザに示したりするために活用できます。
ドラッグ＆ドロップの基本
ドラッグを開始する時には、いくつかの情報が提供されます。
- ドラッグされるデータは複数の異なる形式を取ることがあります。例えば、文書のデータは、ドラッグされた文字列を含んでいます。これについての詳しい情報は、ドラッグデータを参照してください。
- ドラッグしている間、ドラッグフィードバックイメージ（ドラッグ中の内容を示す画像）がマウスポインタの横に表示されます。この画像は任意の物を指定できますが、既定の画像がマウスのボタンが押下された要素の内容から自動的に生成されるため、多くの場合、画像を改めて指定する必要はありません。ドラッグフィードバックイメージについてより詳しく学びたい場合は、ドラッグフィードバックイメージの設定を参照してください。
- ドラッグの種類を示すことができます。3つの種類が利用可能です：
copyは、ドロップ元のデータがドロップ先にコピーされようとしていることを示します。moveは、データがドロップ先に移動されようとしていることを示します。linkは、ドラッグ元とドロップ先の間に何らかの関連付けや繋がりが作られようとしていることを示します。ドラッグ操作をしている間、ドラッグの種類は、その場所にどの操作が可能なのかを示すために変更されるでしょう。詳細はドラッグの種類を参照してください。
Mozilla と Firefox は、標準のドラッグ＆ドロップの仕様に含まれていない多数の機能を実装しています。これによって、複数の項目をドラッグしたり、文字列以外のデータをドラッグしたりすることができます。詳しくは複数の項目のドラッグ＆ドロップを参照してください。
ドラッグ＆ドロップに使われる一般的なデータ型の一覧は、推奨されるドラッグのデータ型を参照してください。
以下の種類の項目のドラッグについては、良い資料となるクイックリファレンスが利用可能です。
DataTransfer オブジェクトの詳細は DataTransfer を参照してください。
ドラッグイベント
ドラッグ＆ドロップ操作の様々な段階で発行される、多数のイベントが利用可能です。ドラッグ操作をしている間は、mousemove のような通常のマウスイベントは発行されず、ドラッグイベントのみが発行されることに注意してください。
すべてのドラッグイベントは、ドラッグ操作に関するデータを dataTransfer プロパティに保持しています。
-
dragstart -
ドラッグが開始された時に、ドラッグが開始された要素において発行されます。ユーザは
dragstartイベントが発行された要素のドラッグを求めています。このイベントの間、イベントリスナは、ドラッグされるデータやドラッグ操作に関連付けられた画像の情報をセットするでしょう。これについての詳しい情報は、ドラッグ操作の開始を参照してください。 -
dragenter - ドラッグ中に、マウスポインタが要素の上に乗った最初の時点で発行されます。このイベントに対するリスナは、その場所へのドロップを許可するかどうかを示します。イベントリスナが無い、あるいは、イベントリスナが何も行わなかった場合、初期状態ではその要素へのドロップは許可されません。ドロップが許可されているかどうかをフィードバックするためにハイライト表示したりドロップ位置のマーカーを表示したりしたい場合にも、このイベントを使用します。詳しくはドロップ対象の明示を参照してください。
-
dragover -
このイベントは、ドラッグ中にマウスポインタが要素の上で動いた時に発行されます。ほとんどの場合、イベントリスナは
dragenterイベントの時と同じ処理を行うでしょう。詳しくはドロップ対象の明示を参照してください。 -
dragleave - このイベントは、ドラッグ中にマウスポインタが要素の上から離れた時に発行されます。イベントリスナは、フィードバック用に表示したすべてのハイライト表示やドロップ位置のマーカーを取り除くでしょう。
-
drag -
このイベントは、ドラッグ操作が行われている間、ドラッグ元の要素（※
dragstartイベントが発行された要素）において定期的に発行されます。 -
drop -
dropイベントは、ドラッグ操作の最後に、ドロップされた位置の要素において発行されます。イベントリスナは、ドラッグされたデータを取り出して、ドロップ位置に挿入する処理を担当するでしょう。このイベントはドロップが望まれた時にのみ発行されます。ユーザがドラッグ操作をキャンセルした場合、例えば Esc キーを押したり、ドロップが許可されていない要素の上でマウスのボタンを放したりした場合には、イベントは発行されません。詳しくはドロップの実行を参照してください。 -
dragend -
ドラッグ元の要素は、ドロップに成功したかどうかに関わらず、ドラッグ操作が完了した時に
dragendイベントを受け取ります。詳しくはドラッグの終了を参照してください。