Canvasレイアウトのドラッグ・サンプルソース改良版

現在開発中のプロジェクトで、Canvasレイアウトをマウスでドラッグして移動させる必要がありました。昨日作成したプログラムでは処理が重過ぎるのか、動きがもたつく感があったので今日改良しました。Flexではドラッグ＆ドロップをサポートしたメソッドが用意されているので使ってみることにしました。当初はDataGridコントロールやTreeコントロールで使われることが想定されていて、使えないんじゃないかなと思っていましたが、十分に使えました。

昨日作成したCanvasを直接移動させるプログラムと比べてみたところ、遥かに軽く移動処理ができるようになりました。

今回も忘れない内にFlex備忘録として残して置きます。

Canvasレイアウトのドラッグ・startDrag(),stopDrag()バージョン

・スクリプトの抜粋

    // マウスボタンダウン
    private function mouseDownHandler(event:MouseEvent):void {
      trace("mouseDownHandler()実行！");
      mindmapView.startDrag();
    }

    // マウスボタンアップ
    private function mouseUpHandler(event:MouseEvent):void {
      trace("mouseUpHandler()実行！");
      mindmapView.stopDrag();
    }

    // マウスアウト
    private function mouseOutHandler(event:MouseEvent):void {
      trace("mouseOutHandler()実行！");
      mindmapView.stopDrag();
    }

・ＭＸＭＬ定義から抜粋

    <mx:Canvas id="mindcanvas" width="100%" height="100%" styleName="mindBox"
        mouseDown="mouseDownHandler(event)"
        mouseUp="mouseUpHandler(event)"
        mouseOut="mouseOutHandler(event)"
        horizontalScrollPolicy="auto"
        verticalScrollPolicy="auto">
      <MyComp:MindMapView id="mindmapView"/>
    </mx:Canvas>