XUL チュートリアル - ドラッグとドロップ

このセクションでは、ドラッグでき、他のオブジェクトにドロップできるオブジェクトの実装方法を説明します。

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

ユーザーインターフェースの多くでは、インターフェース内にある特定のオブジェクトをドラッグすることができます。例えば、ファイルを他のディレクトリーにドラッグしたり、アイコンを別のウィンドウにドラッグすることによって、それが参照する文書を開くことができます。Mozilla と XUL は、ユーザーがオブジェクトをドラッグしようとする場合の処理ができる多数のイベントを提供しています。

ユーザーは、マウスボタンを押したままマウスを動かすことにより、ドラッグを開始することができます。ドラッグは、ユーザーがマウスボタンを放すと終わります。イベントハンドラーは、ドラッグの開始と終了、その間の様々な時点で呼び出されます。

Mozilla は、ドラッグセッションを使ってドラッグを実装しています。ユーザーが、ドラッグできるものをドラッグすると、ドラッグセッションが始まります。ドラッグセッションは、マウスポインターの更新やどこでオブジェクトがドロップされるかを処理します。ドラッグできないものをドラッグしようとしても、ドラッグセッションは始まりません。ユーザーにはマウスが一つしかないのが一般的なので、一度に一つのドラッグセッションしか使用されることはありません。

ドラッグセッションは、Mozilla 自身の中から、あるいは他のアプリケーションから作ることができることに注意して下さい。Mozilla は、必要に応じて、ドラッグされるデータの翻訳を行ないます。

以下のリストは、呼び出すことのできるイベントハンドラーの説明です。これらはどの要素にも置くことができます。必要なのは、イベントが起こったときに何かする必要のある要素に値を置くだけです。

• ondraggesture
  ユーザーが要素のドラッグを開始すると呼び出される。通常、これは、マウスボタンを押したままマウスを動かすことによって呼び出される。このハンドラー内のスクリプトは、ドラッグセッションの設定を行なうことになる。
• ondragover
  このイベントハンドラーは、ある要素の上で、何かがドラッグされているときに呼び出される。オブジェクトがその要素にドロップできるものであれば、ドラッグセッションが通知される。
• ondragenter
  何かをドラッグしている間に、マウスポインターが最初にある要素上に移動して来たときにその要素から呼び出される。これは、オブジェクトのドロップが可能であることをユーザーに示すため、要素の外見を変更するのに使うことができる。
• ondragexit
  何かをドラッグしている間に、マウスポインターがある要素から離れたときにその要素から呼び出される。これは、ドロップが完了した後にも呼び出される。これは、要素から強調やその他の指示を取り去るよい機会である。
• ondragdrop
  このイベントハンドラーは、ある要素で、何かが要素にドロップされるときに呼び出される。この時点で、ユーザーは既にマウスボタンを離している。要素は、イベントを単に無視することも、ドラッグされたオブジェクトを自分自身に貼り付けるといった方法でそれを処理することもできる。

ドラッグとドロップイベントを処理する方法は 2 つあります。最初の方法は、ドラッグとドロップの XPCOM インターフェースを直接使用するものです。2 番目の方法は、これらのイベントの幾つかを処理してくれる JavaScript ラッパーオブジェクトを使うもです。このラッパーは、widget-toolkit (あるいは global) パッケージに含まれています。

XPCOM ドラッグとドロップ

2 つのインターフェースがドラッグとドロップをサポートするために使われます。最初のものは、ドラッグサービス nsIDragService で、2 番目のものは 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 は、返される項目のインデックスとする。

(進む) 次のセクションでは、ドラッグとドロップのための JavaScript ラッパーの使い方を見ることにしましょう。