« Yahoo User Interface Library - Yahoo.util.ColorAnimクラス - | トップページ | Flex2のカスタムコントロールを作る »

2006年8月28日 (月)

Flex2でドラッグ&ドロップ

デスクトップアプリケーションでは当たり前のドラッグ&ドロップですが、Webアプリケーションでは難しいものです。
しかし、最近ではWebアプリケーションでもデスクトップアプリケーションに近いユーザーインターフェイスが求められつつあり、 開発も大変ですよね。

今日は、Flex2でドラッグドロップを行う基本部分のサンプルを書いてみます。
ドラッグ&ドロップ サンプルページ
サンプルのMXMLファイル

まず、ドラッグするオブジェクトと、そのオブジェクトをドロップするターゲットとなるオブジェクトの2つが必要となりますので、 それを作成します。
<mx:Canvas id="ddbox"
    mouseDown="mouseDownHandler(event)"
    mouseMove="mouseMoveHandler(event)"
    mouseUp="mouseUpHandler(event)"
    borderStyle="solid" backgroundColor="#ffffff" width="100" height="100" />

<mx:VBox id="ddtarget"
    dragEnter="dragEnterHandler(event)"
    dragDrop="dropHandler(event)"
    backgroundColor="#9999ff"
    borderStyle="solid" width="300" height="500" />
ここではCanvasとVBoxを使っていますが、mx.core.UIComponentの派生クラスであればOKです。
Canvasはドラッグされるオブジェクトで、mouseDown、mouseMove、mouseUpの各イベントハンドラを作成します。
VBoxはドロップされるターゲットで、dragEnterとdragDropイベントハンドラを作成します。
ここで、ドラッグされるターゲットとなるオブジェクトの方は、なぜかbackgroundColorを指定していないとdragEnterイベントが 正しく発生しないようですので、気をつけてください。

次に、まずドラッグの対象となるオブジェクトのmouseDown、mouseMove、mouseUpイベントハンドラを実装します。
import mx.events.*;
import mx.core.*;
import mx.managers.DragManager;
import mx.controls.*;
import mx.containers.*;

private var isMouseDown:Boolean = false;

private function mouseDownHandler(event:MouseEvent) : void
{
    isMouseDown = true;
}

public function mouseMoveHandler(event:MouseEvent) : void
{
    if (isMouseDown && !DragManager.isDragging)
    {
        var ds:DragSource = new DragSource();
        ds.addData(ddbox, "canvas");
        DragManager.doDrag(ddbox, ds, event);
    }
}

public function mouseUpHandler(event:MouseEvent) : void
{
    isMouseDown = false;
}
mouseDown、mouseUpイベントでは、マウスボタンを押しているかどうかをBooleanの変数にセットしているだけです。
mouseMoveイベントでは、マウスが押されていて、かつDragManagerのisDraggingがfalseの場合に処理を行います。

DragManagerは、mx.managers.DragManagerクラスで、ドラッグ&ドロップ処理をする際の要となるクラスです。
ドラッグをスタートするときは、まず、mx.core.DragSourceクラスのインスタンスを作成し、addDataメソッドで ドラッグするオブジェクトと、そのオブジェクトを識別するための名前を指定して追加します。
その後、DragManagerクラスのdoDragメソッドを呼び出すと、ドラッグが開始されます。
ドラッグ中は、デフォルトでドラッグするオブジェクトと同じサイズの半透明の四角形が表示されます。

最後に、ドラッグされるターゲットオブジェクトのイベントハンドラを記述します。
private function dragEnterHandler(event:DragEvent):void
{
    if(event.dragSource.hasFormat("canvas")){
        DragManager.acceptDragDrop(IUIComponent(event.target));
    }
}

private function dropHandler(event:DragEvent):void
{
    var item:Box = new Box();
    
    item.width = 298;
    item.height = 30;
    
    item.setStyle("borderStyle", "solid");
    item.setStyle("backgroundColor", 0xff0000);
    
    item.addChild(label);
    
    ddtarget.addChild(item);
}
dragEnterイベントは、オブジェクトがドラッグされてターゲット内に入った時(まだドロップはされていません)に発生します。
この時、ターゲットではドラッグされているオブジェクトのドロップを許可するかどうかを判定します。
引数にわたってくるDragEvent型のインスタンスのdataSourceプロパティにより、ドラッグ開始時に作成したDragSourceを取得でき、 そのhasFormatメソッドによりそのDragSourceが保持しているオブジェクトを判定できます。
オブジェクトのドロップを許可する場合、DragManagerクラスのacceptDragDropメソッドを呼び出します。

dragDropイベントはユーザーがマウスを離した時に発生します。
この時に、ドロップ完了時の処理を記述して、ドラッグ&ドロップ処理が完成です。

|

« Yahoo User Interface Library - Yahoo.util.ColorAnimクラス - | トップページ | Flex2のカスタムコントロールを作る »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11642165

この記事へのトラックバック一覧です: Flex2でドラッグ&ドロップ:

« Yahoo User Interface Library - Yahoo.util.ColorAnimクラス - | トップページ | Flex2のカスタムコントロールを作る »