Flexアプリの直感的なドラッグ＆ドロップを体験しよう：現場で使えるFlex実践テクニック（3）（2/2 ページ）

» 2007年08月15日 00時00分公開

[成瀬勉，クラスメソッド]

前のページへ 1|2 　　　　　　

画像ファイルもドラッグ＆ドロップできる

　デフォルトでドラッグ＆ドロップをサポートしていないコントロールに、新たにドラッグ＆ドロップ機能を追加する場合や、異なるコントロール間で行う場合には、“DragManager”を利用します。

　まずは、サンプルを見てみましょう。

　このサンプルは画像を下部の桃色のエリアにドラッグすると、その画像がエリアに追加されるサンプルです。

サンプル3　画像をドラッグして追加する

　少し長くなりますが、ソースコードも確認してみましょう。

Sample3.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical">
    <mx:Script>
    <![CDATA[
        import mx.events.DragEvent;
        import mx.core.UIComponent;
        import mx.core.IFlexDisplayObject;
        import mx.core.DragSource;
        import mx.managers.DragManager;
    
        private function mouseDownHandler(event:MouseEvent):void{
            //ドラッグされるデータを作成
            var dragSource:DragSource = new DragSource();
            dragSource.addData(image.source, "img");
            //ドラッグ中のイメージを作成
            var imageProxy:UIComponent = new UIComponent();
            var bitmap:Bitmap = new Bitmap();
            var bitmapData:BitmapData 
                = new BitmapData(image.width, image.height);
            bitmapData.draw(image);
            bitmap.bitmapData = bitmapData;
            imageProxy.addChild(bitmap);
            //ドラッグを開始
            DragManager.doDrag(image, dragSource, event, imageProxy);
        }
        private function dragEnterHandler(event:DragEvent):void{
            DragManager.acceptDragDrop(vbox);
        }
        private function dragOverHandler(event:DragEvent):void{
            vbox.setStyle("borderStyle", "solid");
        }
        private function dragExitHandler(event:DragEvent):void{
            vbox.setStyle("borderStyle", "none");
        }
        private function dragDropHandler(event:DragEvent):void{
            var dropImage:Image = new Image();
            dropImage.source = event.dragSource.dataForFormat("img");
            vbox.addChild(dropImage);
        }
        private function dragCompleteHandler(event:DragEvent):void{
            vbox.setStyle("borderStyle", "none");
        }
    ]]>
    </mx:Script>
    <mx:Image id="image" source="img.png" 
                mouseDown="mouseDownHandler(event)"
                dragComplete="dragCompleteHandler(event)"
    />
    <mx:VBox id="vbox" width="300" height="200"
            borderColor="0x0000FF" backgroundColor="0xFFCCCC"
            borderStyle="none" horizontalAlign="center" 
            dragEnter="dragEnterHandler(event)"
            dragOver="dragOverHandler(event)"
            dragExit="dragExitHandler(event)"
            dragDrop="dragDropHandler(event)"
    />
</mx:Application>

　ドラッグ＆ドロップという操作は、マウスを押下したとき、マウスがコンポーネント上に来たとき、コンポーネントにドロップされたとき、などの一連のイベントの流れがあります。

　それぞれのタイミングで発生するイベントと処理の手順は以下のとおりになります。