Flex拖动技术大全（2）

Flex 拖动技术

最新推荐文章于 2025-09-12 16:33:06 发布

原创最新推荐文章于 2025-09-12 16:33:06 发布 · 575 阅读

0 ·

CC 4.0 BY-SA版权

2.非加强拖动技术
Label的拖动，可以扩展到其他组件

Button的拖动，可以扩展到其他组件

[html]view plaincopy 
    
   <?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中添加图片等。

[html]view plaincopy 
    
   <?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.图片的拖动

[html]view plaincopy 
    
   <?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>  