Home > しらべる > AIRのHTMLコンポーネントにデータをドラッグする方法

AIRのHTMLコンポーネントにデータをドラッグする方法

  • Posted by: memorycraft
  • 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へのフルアクセスがもたらす無限の可能性がキラキラしとりますな。

Trackbacks:0

TrackBack URL for this entry
http://www.memorycraft.jp/mt-tb.cgi/34
Listed below are links to weblogs that reference
AIRのHTMLコンポーネントにデータをドラッグする方法 from メモリークラフト

Comments:0

Comment Form

Home > しらべる > AIRのHTMLコンポーネントにデータをドラッグする方法

ページの先頭へ戻る