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

杉山貴章（オングス）
2008-09-01 15:37:01
Firefox 3の開発者向けTipsを紹介する本連載。Firefox 3.1のHTML 5対応を紹介してきたが、今回はDrag and drop APIを解説する。
最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

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に示すイベントがある。

表1 ドラッグの開始元のエレメントから送出されるイベント
イベント名内容
dragstartドラッグ操作が開始されたときに送出される
dragドラッグ中に継続的に送出される
dragendマウスが離され、ドラッグ操作を終了したときに送出される
表2 ドラッグのターゲットとなるエレメントから送出されるイベント
イベント名内容
dragenterドラッグされているオブジェクトがターゲットの境界内に入ったときに送出される
dragoverドラッグされているオブジェクトがターゲットの境界内にあるときに継続的に送出される
dragleaveドラッグされているオブジェクトがターゲットの境界から離れたときに送出される
dropオブジェクトがターゲット上にデータがドロップされたときに送出される

　次に、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に示す値が指定できる。

表3 effectAlloewdプロパティに設定可能な値と効果
値効果
noneドラッグ操作を許可しない
copyドロップ先へのコピーのみを許可する
linkドラッグ元とドロップ先でリンクを使って要素の内容を共有する
moveドロップ先への移動のみを許可する
copyLinkコピーまたはリンクを許可する
copyMoveコピーまたは移動を許可する
linkMoveリンクまたは移動を許可する
allコピー、リンク、移動の全ての操作を許可する

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

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

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

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

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

  • 新着記事
  • 特集
  • ブログ