Drag and Drop

ドラッグ＆ドロップインタフェース

多くのユーザインタフェースは、特定のオブジェクトをインタフェース内部でドラッグできるようにしています。例えば、ファイルを他のディレクトリにドラッグしたり、アイコンを他のウィンドウにドラッグして、そのアイコンが参照しているドキュメントを開くと行ったことができます。Mozilla と XUL は、ユーザがオブジェクトをドラッグしようとしたときに何らかの処理を行えるよう、様々なイベントを提供しています。

ユーザは、マウスのボタンを押下してマウスを移動させることでドラッグを開始できます。ドラッグはユーザがマウスボタンを放したときに停止します。イベントハンドラは、ユーザがドラッグを開始したときと終了したとき、さらにその間の様々な段階で呼び出されます。

Mozilla はドラッグセッションを利用することでドラッグを実装しています。ユーザがドラッグ可能なオブジェクトをドラッグするリクエストを行ったとき、ドラッグセッションが開始されます。ドラッグセッションは、マウスカーソルの更新や、オブジェクトがドロップされる場所を処理します。そのオブジェクトがドラッグできないときは、ドラッグセッションは開始されません。ユーザが使っているマウスは通常ひとつなので、一度に作成できるラッグセッションはひとつのみです。

ドラッグセッションは、Mozilla 自体から、あるいは他のアプリケーションから作成されることに注意してください。Mozilla は必要に応じてドラッグされたデータを変換処理します。

以下のリストは、あらゆる要素に設定できる、呼び出し可能なイベントハンドラを説明したものです。値を設定する必要があるのは、イベントが発生したときに何らかの処理が必要なハンドラのみです。

ondrag

ドラッグ＆ドロップ操作中、定期的に呼び出されます。

ondraggesture 

ユーザが要素のドラッグを介したときに呼び出されます。通常、ユーザがマウスボタンを押下してマウスを移動したときに発生します。このハンドラ内のスクリプトがドラッグセッションを設定する必要があります。

ondragstart  

ondraggesture のエイリアスです。これは HTML 5 仕様書で定義されたイベントの名前で、HTML と XUL のいずれでも使うことができます。ただし、旧バージョンの Firefox との後方互換性のため、XUL では ondraggesture を使い続けた方が良いでしょう。

ondragover 

要素の上に何かがドラッグされたときに呼び出されます。オブジェクトがその要素上でドロップ可能な場合は、ドラッグセッションに対して通知が行われます。

ondragenter 

何かがドラッグされている間、マウスポインタが初めて要素の上に乗ったときに呼び出されます。これは、オブジェクトがその要素にドロップできることをユーザに示すために、要素の見た目を変える場合などに使われます。

ondragexit 

何かがドラッグされている間、マウスポインタが要素から離れたときに呼び出されます。これは、ドロップが完了した後、その要素からハイライトやその他の表示を外す場合などに使われます。

ondragdrop 

何かが要素の上にドロップされたときに呼び出されます。この時点では、ユーザは既にマウスボタンを放しています。その要素は、単純にイベントを無視するか、あるいは、ドラッグされたオブジェクトを要素自体に渡すなど、何らかの方法で処理できます。

ondragend  

ドラッグ操作が完了したときに呼び出されます。

ドラッグ＆ドロップイベントを処理するには 2 つの方法があります。ひとつは、ドラッグ＆ドロップのための XPCOM インタフェースを直接利用する方法です。もうひとつは、そのインタフェースの一部を代わりに処理する JavaScript ラッパー オブジェクトを用いる方法です。このラッパーのコードは、ウィジェットツールキット (つまりグローバル) パッケージに含まれる toolkit/content/nsDragAndDrop.js nsDragAndDrop.js と呼ばれるファイルで確認できます。

XPCOM のドラッグ＆ドロップインタフェース

2 つのインタフェースがドラッグ＆ドロップをサポートするために使われています。ひとつはドラッグサービス (nsIDragService) で、もうひとつはドラッグセッション (nsIDragSession) です。

nsIDragService は、ドラッグ開始時にドラッグセッションを作成し、ドラッグ完了時にドラッグセッションを削除する役割を果たします。ondraggesture イベントハンドラ内でドラッグを開始するには invokeDragSession 関数を呼び出します。この関数が呼び出されると、ドラッグが開始されます。

invokeDragSession 関数は、以下のように 4 つの引数を取ります。

invokeDragSession(element,transferableArray,region,actions)

element 

ドラッグされる要素への参照。これは、イベントハンドラ内で event.target プロパティを得ることで取得可能です。

transferableArray 

ドラッグされる各項目のための、nsITransferable オブジェクトの配列。一連のファイルなど、複数のオブジェクトを一度にドラッグ可能であることから、配列が利用されます。

region 

フィードバックの表示に利用される範囲。これは通常 null に設定されます。

actions 

ドラッグが使用するアクション。これは、以下の定数のいずれか、あるいはいくつかの組み合わせに設定されます。アクションは、ドラッグされているものに応じて、ドラッグ中に変更することが可能です。

nsIDragSession.DRAGDROP_ACTION_NONE 

有効なドラッグが存在しないことを示すのに使われます。

nsIDragSession.DRAGDROP_ACTION_COPY 

ドラッグされている項目はドロップされた場所へコピーする必要があります。

nsIDragSession.DRAGDROP_ACTION_MOVE 

ドラッグされている項目はドロップされた場所へ移動する必要があります。

nsIDragSession.DRAGDROP_ACTION_LINK 

ドラッグされているアイテムに対するリンク (あるいはショートカット、エイリアス) を、ドラッグされた場所に作成する必要があります。

また、NsIDragService インタフェースは、ドラッグイベントハンドラ内からドラッグの状況を取得、変更するために呼び出せる、getCurrentSession 関数を提供します。この関数は NsIDragSession を実装したオブジェクトを返します。

nsIDragSession インタフェースは、発生中のドラッグの属性を取得、設定するために利用されます。以下の属性とメソッドが利用可能です。

canDrop 

マウスが乗っている要素が、ドラッグされているオブジェクトをその要素上でドロップするのを受け入れられる場合は、この値を true に設定します。そのオブジェクトをドロップすることができない場合は、この値を false に設定します。これは、ondragover や ondragenter イベントハンドラ内で変更されるべきです。

dragAction 

実行される現在のアクションを設定します。これは上で説明した定数のいずれかあるいは複数になります。これを利用して、ユーザに追加のフィードバックを提供することができます。

numDropItems 

ドラッグされている項目の数。例えば、5 つのブックマークがドラッグされている場合、この値は 5 になります。

getData(transfer,index) 

ドラッグされているデータを取得します。最初の引数はデータを保持するための nsITransferable オブジェクトとします。2 番目の引数である index は、返される項目のインデックスです。

sourceDocument 

ドラッグが開始されたドキュメント。

sourceNode 

ドラッグが開始された DOM ノード。

isDataFlavorSupported(flavor) 

ドラッグされているデータに、指定された特性のデータが含まれていた場合は true を返します。