Firefox 3.1のHTML 5対応を検証--Drag and drop API

HTML 5のドラッグ＆ドロップAPI

　HTML 5では新たにDrag and drop APIが追加される。これによって、オブジェクトがドラッグ／ドロップされた際に発生するイベントを処理する標準の方法が提供されることになる。

　Firefox 3でもドラッグ＆ドロップに関するイベントがサポートされているが、Forefox 3.1ではHTML 5のAPIがサポートされ、標準的な方法でドラッグ＆ドロップが処理できるようになる予定だ。

　HTML 5のDrag and drop APIでは、オブジェクトがドラッグおよびドロップされた際のイベントを表すDragEventインタフェースが定義される。DragEventはドラッグの開始元から送出されるものと、ドラッグのターゲットから送出されるものがあり、それぞれ表1、表2に示すイベントがある。

　次に、DataEventオブジェクトを受け取るリスナー関数側の処理を考える。DataEventオブジェクトはDataTransfer型のdataTransferというプロパティを持ち、これはドラッグ＆ドロップに関する様々な情報を保持する。

　DataTransferの持つプロパティおよびメソッドは下記の通りだ。

• effectAllowedプロパティ
• dropEffectプロパティ
• typesプロパティ
• clearData(format)メソッド
• setData(format, data)メソッド
• getData(format)メソッド
• setDragImage(image, x, y)メソッド
• addElement(element)メソッド

　このうち、effectAllowedはドラッグ元で許可されるドロップ効果を指定するためのプロパティで、その値は通常、dragstartイベントのハンドラで設定する。これによって許可されるドラッグ効果を制御することができる。effectAllowedには表3に示す値が指定できる。

　dropEffentはドロップ時やドラッグ終了時の効果を表すプロパティで、その値は通常、dragenterイベントのハンドラにおいて設定する。これによってドラッグ時にユーザがターゲット上でマウスを離した際の効果を指定できる。

　dropEffectにはこのうち「none」「copy」「link」「move」の値を指定できるが、effectAllowedプロパティによって許可された効果でなければ有効にはならない。また、dropEffectに明示的に値を指定しない場合には、effectAllowedの値からcopy、link、moveの優先度で自動的に設定される。

　ただし、エレメントによってはデフォルト値を持つ場合もある。例えば通常のテキストの選択領域のドラッグに対しては「copy」が、テキストフィールドからの選択領域のドラッグに対しては「move」が設定される。

　setData()メソッドではドラッグするデータを設定する。第1引数にデータのMIMEタイプを、第2引数に実際のデータを指定する。設定されたデータは、ターゲット側のイベントハンドラにおいてgetData()メソッドを用いて取り出すことができる。その場合、引数には取得したいデータのMIMEタイプを指定する。

　上記を踏まえて、imgエレメントのドラッグ、およびdivエレメントに対するドロップを監視する例を見てみよう。