【Flex】【ActionScript】ドラッグ&ドロップ
ドラッグ&ドロップをする時に、確実に必要なのは、
です。
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を実装するときに最低限必要なのは、
あと有ると、もっとD&Dっぽくなるもの
これらが、上で書かれている関数で処理されています。
関数の中身についてはまた次のエントリで述べます。
以下出来たものです。参照されると、上で述べたことがイメージしやすくなると思います。
http://www17.atpages.jp/seamountain/AS/Mycabinet2.html