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を解説する。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

　リスト1では、「image」というIDを持つimgエレメントと、「target」というIDを持つ編集可能なdivエレメントに対して、それぞれにドラッグの開始／終了、進入／通過のイベントに対するリスナーを登録している。。

リスト1 Drag and Drop APIの使用例




  
    
    
    
    
    Drag and Drop APIのサンプル

    
  

  

    
ドラッグ・アンド・ドロップのサンプル
※ブラウザで確認する

　doDragStartメソッドは画像のドラッグ開始時に呼び出され、テキストデータとeffectAllowed値のセットを行っている。doDragEnterとdoDragOverではdropEffectの値を明示的に指定している（もっとも今回はデフォルトが「copy」のはずなのであまり意味はない）。

　このHTMLに対応するブラウザで表示すると、図1のように表示される（この例ではSafari 3.1.2を使用）。

図1 Safari 3.1.2での表示 図1 Safari 3.1.2での表示

　そして画像をDIV領域にドラッグ＆ドロップする（図2）ことで、JavaScriptコンソールには図3のように表示される。

図2 画像をドラッグ＆ドロップ 図2 画像をドラッグ＆ドロップ
図3 JavaScriptコンソールの表示 図3 JavaScriptコンソールの表示

　doDragStartとdoDragEnd内ではgetDataの値がundefinedになっているが、これはgetDataメソッドがターゲット側エレメントから送出されるイベントのハンドラでなければ有効でないからである。

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