- 2008年4月23日 15:15
- しらべる
AIRのHTMLコントロールをいじっていると、ちょっと色気を出してブラウザっぽくしてみたくなり、その瞬間にいろんな壁にぶち当たることは多い。
そのうちのひとつとして、HTMLへのドラッグがある。
履歴やブックマークのデータをブラウザのHTMLエリアにドロップしてナビゲーションさせたいが、デフォルトでは出来ない。
以下は、HTMLコンテンツへのドラッグを実現する方法のメモです。
ドラッグ元の設定
ここでのミソは、DragSource::addDataのキーの方にURLを入れてしまうこと。
理由は後述。------- ①
//Treeコンポーネントのマウスダウンに対してイベントハンドラを定義
historyTree.addEventListener( MouseEvent.MOUSE_DOWN, onDragStart);
//URLをデータソースとして、ドラッグ開始
private function onDragStart( event:MouseEvent ):void
{
var dragInitiator:Tree=Tree(event.currentTarget);
var url:String = historyTree.selectedItem.@url;
var src:DragSource = new DragSource();
src.addData(url, url);
DragManager.doDrag(dragInitiator, src, event);
}
ドラッグ先の設定
ここでのキモは、HTMLコンテンツのDOMのドキュメント自身に対してドラッグイベントのハンドラを定義することです。
また、HTML内でのドラッグイベントのイベントオブジェクトはEventのサブクラスではなく、_HTMLScriptObjectというHTML内部用の動的クラスになっている。
なので、ドラッグデータソースにセットしたデータはevent.dragSourceではなくてevent.dataTransfer.types に格納されていることに注意。
event.dataTransfer.types では、DragSource::addDataで、キーとした方だけしか参照できないため、①で、キー自体をURLにする必要があるのでしたー。
//HTMLコントロールのロード完了に対してイベントハンドラを定義
html.addEventListener(Event.COMPLETE, onLoadComplete);
//HTMLドキュメント自体に対してイベントハンドラを定義
private function onLoadComplete(event:Event):void{
var body:Object = html.htmlLoader.window.document;
body.addEventListener("dragenter", onHTMLDragEnter);
body.addEventListener("drop", onHTMLDragDrop);
body.addEventListener("dragover", onHTMLDragOver);
}
//HTMLドキュメントにドラッグが進入したとき
//データがあれば受け付ける
private function onHTMLDragEnter(event:*):void{
if (event.dataTransfer.types.length > 0) {
DragManager.acceptDragDrop(html);
}
}
//HTMLドキュメント上にドロップしたとき
//データをURLとして、HTMLコンポーネントでロードする
private function onHTMLDragDrop(event:*):void{
var types = event.dataTransfer.types;
if (types.length > 0) {
var url:String = types[0];
if(url)html.location = url;
}
}
//DragOverとデフォルトのイベントハンドラをキャンセルする
private function onHTMLDragOver(event:*):void{
event.preventDefault();
}
DOMへのフルアクセスがもたらす無限の可能性がキラキラしとりますな。
