Flex拖动技术大全（2）

来源：互联网发布：城市规划作品集知乎编辑：程序博客网时间：2024/04/27 16:46

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

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

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