自前 Dragger #01

Flex フレームワークには、ドラッグ＆ドロップ操作をサポートする DragManager が用意されていますが、タイトルの通りこれらの一切を無視して、自前のドラッグ機構を作り、応用するという Tips を今後数回に分けて解説します。今回は初回なので基本から。

お題「無限ドラッグ移動」

対象オブジェクトを制限なく座標移動させる機能を実装してみましょう。

ドラッグ処理のシーケンス

処理手順は次の通り、フローチャートに書き起こしてみました。

マウスダウン開始からマウスアップまでの間、ステージのマウスイベントをハンドリングして、マウスの移動量を制御するだけです。

実装コード (MXML)

<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s  = "library://ns.adobe.com/flex/spark"
>

<fx:Script>
<![CDATA[
    protected var startMouseDownPoint:Point;
    protected var startTargetPoint:Point;
    protected override function createChildren():void {
        super.createChildren();
        startMouseDownPoint = new Point();
        startTargetPoint = new Point();
        dragArea.addEventListener(MouseEvent.MOUSE_DOWN, dragAreaMouseDownHandler);
    }
    protected function dragAreaMouseDownHandler(event:MouseEvent):void {
        startMouseDownPoint.x = stage.mouseX;
        startMouseDownPoint.y = stage.mouseY;
        startTargetPoint.x = target.x;
        startTargetPoint.y = target.y;
        stage.addEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler);
        stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler);
    }
    protected function stageMouseUpHandler(event:MouseEvent):void {
        stage.removeEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler);
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler);
    }
    protected function stageMouseMoveHandler(event:MouseEvent):void {
        var dx:Number = stage.mouseX - startMouseDownPoint.x + startTargetPoint.x;
        var dy:Number = stage.mouseY - startMouseDownPoint.y + startTargetPoint.y;
        target.move(dx, dy);
        event.updateAfterEvent();
    }
]]>
</fx:Script>

<s:BorderContainer
id               = "dragArea"
width            = "300"
height           = "300"
backgroundAlpha  = "1"
backgroundColor  = "0"
verticalCenter   = "0"
horizontalCenter = "0"
 />

<s:Group id="target" x="200" y="200">
<s:Button x="0"   y="0"   width="100" height="50" />
<s:Button x="300" y="0"   width="50" height="100" />
<s:Button x="0"   y="200" width="50" height="50" />
</s:Group>

</s:Application>

出力結果

出力結果は次の通り

[SWF]http://publick-blog.s3.amazonaws.com/wp-content/uploads/2011/07/DragLesson01.swf,640,480[/SWF]

次回は、少し応用を効かせたものを紹介します。