2.非加强拖动技术
Label的拖动,可以扩展到其他组件
Button的拖动,可以扩展到其他组件
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- fontSize="12">
- <mx:Script>
- <![CDATA[
- import mx.core.IUIComponent;
- import mx.events.DragEvent;
- import mx.core.DragSource;
- import mx.managers.DragManager;
- //拖动初始器
- private function dragSource(e:MouseEvent, format:String):void
- {
- var iu:IUIComponent=e.currentTarget as IUIComponent;
- var ds:DragSource=new DragSource();
- ds.addData({"x": e.localX, "y": e.localY}, format); //设置一个标号format
- DragManager.doDrag(iu, ds, e);
- }
- //当拖进去时
- private function onEnter(e:DragEvent, format:String):void
- {
- if (e.dragSource.hasFormat(format)) //如果标号为format则接受拖来的物体
- {
- DragManager.acceptDragDrop(IUIComponent(e.target));
- }
- }
- //当拖完成时
- private function onDrop(e:DragEvent, format:String):void
- {
- var myData:Object=new Object();
- myData=e.dragSource.dataForFormat(format);
- btn.x=this.mouseX - myData.x; //btn为按钮的id,要是扩展到其他组件,改这里就可以了。
- btn.y=this.mouseY - myData.y;
- }
- ]]>
- </mx:Script>
- <mx:Canvas y="40"
- id="cansAccess"
- backgroundColor="#000000"
- width="300"
- height="200"
- dragEnter="onEnter(event,'formatString')"
- dragDrop="onDrop(event,'formatString')"/>
- <mx:Button id="btn"
- label="拖动我到面板"
- mouseDown="dragSource(event,'formatString')"/>
- </mx:Application>
一定要注意,标签的先后位置,Button 要在Canvas 之后.
3.Canvas容器中拖动Box,你还可以在Box中添加图片等。
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="absolute"
- fontSize="12">
- <mx:Script>
- <![CDATA[
- import mx.containers.Box;
- import mx.containers.Canvas;
- import mx.core.IUIComponent;
- import mx.events.DragEvent;
- import mx.managers.DragManager;
- import mx.core.DragSource;
- //拖动初始器
- private function dragSource(e:MouseEvent, format:String):void
- {
- var iu:IUIComponent=e.currentTarget as IUIComponent;
- var ds:DragSource=new DragSource();
- ds.addData(iu, format); //设置一个标号format
- DragManager.doDrag(iu, ds, e); // 开始拖动这个物体
- }
- //当拖进去时
- private function onEnter(e:DragEvent, format:String):void
- {
- if (e.dragSource.hasFormat(format)) //如果标号为format则接受拖来的物体
- {
- DragManager.acceptDragDrop(IUIComponent(e.target)); // 接受被拖进来的物体
- }
- }
- //当拖完成时
- private function onDrop(e:DragEvent, format:String):void
- {
- var box:Box=Box(e.dragInitiator); //如果扩展到其他组件,改这里Box就可以了。
- box.x=e.localX;
- box.y=e.localY;
- }
- ]]>
- </mx:Script>
- <mx:Canvas backgroundColor="0xEEEEEE"
- width="500"
- height="246"
- horizontalCenter="0"
- verticalCenter="0"
- dragEnter="onEnter(event,'boxFormat')"
- dragDrop="onDrop(event,'boxFormat')">
- <mx:Box id="boxDrag"
- width="20"
- height="20"
- backgroundColor="0x00FFCC"
- x="97"
- y="47"
- mouseDown="dragSource(event,'boxFormat');">
- </mx:Box>
- </mx:Canvas>
- </mx:Application>
4.图片的拖动
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- width="100%"
- height="100%"
- fontSize="12">
- <mx:Script>
- <![CDATA[
- private var oldX:Number; //拖动开始是的坐标
- private var oldY:Number;
- //拖动开始
- private function dragStart(event:MouseEvent):void
- {
- oldX=event.stageX; //相对Application的坐标
- oldY=event.stageY;
- }
- //拖动结束
- private function dragEnd(event:MouseEvent):void
- {
- lbl.text="Local (x,y):" + event.localX.toString() + "," + event.localX.toString(); //相对图片的坐标
- lbl2.text="Stage (x,y):" + event.stageX.toString() + "," + event.stageY.toString(); //相对Application的坐标
- if (event.buttonDown)
- { //如果鼠标在移动过程中并且按下,也就是说鼠标的拖动事件。
- var x:Number=event.stageX - oldX; //相对Application的坐标的移动量
- var y:Number=event.stageY - oldY;
- oldX=event.stageX; //更新拖动开始是的坐标
- oldY=event.stageY;
- img.move(img.x + x, img.y + y); //img是 Image的id,如果扩展到其他组件,改这里就可以了。
- }
- }
- ]]>
- </mx:Script>
- <mx:Label x="10"
- y="10"
- text=""
- id="lbl"/>
- <mx:Label x="10"
- y="27"
- text=""
- id="lbl2"/>
- <mx:Panel x="257"
- y="71"
- width="700"
- height="80%"
- layout="absolute"
- horizontalScrollPolicy="off"
- verticalScrollPolicy="off"
- title="图片在面板中的拖动例子"
- fontSize="12">
- <mx:Image id="img"
- x="0"
- y="0"
- source="test.JPG"
- mouseMove="dragEnd(event)"
- mouseDown="dragStart(event)"/>
- </mx:Panel>
- </mx:Application>