読者です 読者をやめる 読者になる 読者になる

【Flex】【ActionScript】ドラッグ&ドロップ

Flex ActionScript

ドラッグ&ドロップをする時に、確実に必要なのは、

  1. D&Dしたい物
  2. D&Dしたいものが予め置いてあるエリア
  3. D&Dをする先のエリア

です。
1.と2.は

    <mx:VBox id="dd_VBox" width="336" height="164" x="351" y="35" 
    	dragDrop="dragDropHandler(event)"
    	backgroundColor="#FFFFFF" 
    	dragEnter="dragEnterHandler_vbox(event)" 
    	dragOver="dragOverHandler(event)" 
    	dragExit="dragExitHandler(event)">
        <mx:Canvas id="dd_canvas"
        	        mouseDown="mouseDownHandler(event)"
                    dragComplete="dragCompleteHandler(event)" width="161" height="56">
            <mx:Image id="image" source="img/icon_048.png" 
              x="7" y="4"/>
            <mx:Text x="59" y="9" text="sea_mountain" width="95" height="19"/>
            <mx:Text x="86" y="31" text="海山党"/>
        </mx:Canvas>

    </mx:VBox>

3.は

<mx:VBox id="vbox" width="161" height="72"
       borderColor="0x0000FF" backgroundColor="0xFFCCCC"
       borderStyle="none" horizontalAlign="center" 
       dragEnter="dragEnterHandler(event)"
       dragOver="dragOverHandler(event)"
       dragExit="dragExitHandler(event)"
       dragDrop="dragDropHandler(event)"
       horizontalScrollPolicy="off"
      verticalScrollPolicy="off"
/>

このような形になっています。
D&Dをするために色々な値を設定しています。
3で言うと

       dragEnter="dragEnterHandler(event)"
       dragOver="dragOverHandler(event)"
       dragExit="dragExitHandler(event)"
       dragDrop="dragDropHandler(event)"

この部分です。
このタグで生成されたオブジェクトに、ドラッグで入ってきたときは、dragEnter="ここ"の「ここ」に書かれている関数を呼び出します。
(後述しますが、この呼び出した関数先で、ドロップされたときに、そのドロップされたデータを受け入れるのを許可するという設定をします)
これと同じ考え方で見ていくと、1つ1つのdragにどういう時を表していて、どういうときにどの関数が読み込まれているか… 分かるようになしたいです。
dragEnterとdragOverはどう違うのかとか思いましたが、以下のサイトに、ActionScriptでは有りませんが(おそらくJavaScript)説明がありました。
http://webos-goodies.jp/archives/drag_and_drop_using_gears.html
多分一緒の意味だと思います。

イベント名	発生条件
dragenter	ドラッグ中にマウスカーソルが要素内に入ったとき
dragover	ドラッグ中にマウスカーソルが要素内を移動したとき
dragleave	ドラッグ中にマウスカーソルが要素内から出たとき
drop	要素内にファイルがドロップされたとき


D&Dを実装するときに最低限必要なのは、

  1. D&Dされる先の許可
  2. D&Dされた時のaddChild()(子要素の追加)

あと有ると、もっとD&Dっぽくなるもの

  • D&Dしている時に、D&Dしている要素がポインタの下に表示される
  • ドラッグされている先の要素の色が変わるとか、枠がつくとか

これらが、上で書かれている関数で処理されています。
関数の中身についてはまた次のエントリで述べます。

以下出来たものです。参照されると、上で述べたことがイメージしやすくなると思います。
http://www17.atpages.jp/seamountain/AS/Mycabinet2.html