FLEX拖动总结

最新推荐文章于 2021-07-18 15:44:29 发布

原创最新推荐文章于 2021-07-18 15:44:29 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #image #function #import #application #button

FLEX/FLASH 专栏收录该内容

5 篇文章

订阅专栏

Drag 常用的方法：
1.系统startDrag,stopDrag(适合单个拖拽)
2.Move()(适合多个拖拽)
3.DragManager (有默认的特效)

a.单个拖动

private function mouseDownHandler():void{
 demo.startDrag();
}
private function mouseUpHandler():void{
 demo.stopDrag();
}
<mx:Button  id="demo" mouseDown="mouseDownHandler()" 
mouseUp="mouseUpHandler()" />

b.区域拖动

private function mouseDownHandler():void{  
   demo.startDrag(false,new Rectangle(0,0,can1.width-demo.width,can1.height-demo.height));  
}

c.多个拖动

private function mouseDownHandler():void{
	cv2.startDrag();
}

private function mouseUpHandler():void{
	cv2.stopDrag();
}
	<mx:Canvas id="cv1" width="544" height="324" backgroundColor="#FFFFFF">
		<mx:Canvas id="cv2" x="0" y="39" width="197" height="159" verticalScrollPolicy="off" horizontalScrollPolicy="off" 
			backgroundColor="green" buttonMode="true" 
			mouseDown="mouseDownHandler()" mouseUp="mouseUpHandler()">
			<mx:Button id="demo" label="demo" x="10" y="38"/>
			<mx:Button label="demo" x="76" y="60"/>
			<mx:Button label="demo" x="28" y="90"/>
		</mx:Canvas>
	</mx:Canvas>

d.多个在一个区域里拖动

<mx:Script>
	<![CDATA[
		import mx.core.UIComponent;
		import mx.events.MoveEvent;
		private var maxXObj:Number;
		private var minXObj:Number;
		private var maxYObj:Number;
		private var minYObj:Number;
		private var tempArrayX:Array;
		private var tempArrayY:Array;
		private function mouseDownHandler():void{
			this.cv2.startDrag();
			tempArrayX=new Array(cv2.numChildren);
			tempArrayY=new Array(cv2.numChildren);
			for(var i:int;i<cv2.numChildren;i++)
			{
				var child:UIComponent= cv2.getChildAt(i) as UIComponent;
				tempArrayX[i]=child.x;
				tempArrayY[i]=child.y;
			}
				tempArrayX.sort(Array.NUMERIC);
				tempArrayY.sort(Array.NUMERIC);
				maxXObj=tempArrayX[tempArrayX.length-1];
				minXObj=tempArrayX[0];
				maxYObj=tempArrayY[tempArrayY.length-1];
				minYObj=tempArrayY[0];
			this.addEventListener(MouseEvent.MOUSE_MOVE,moveHandler);
			
		}
		private function mouseUpHandler():void{
			this.removeEventListener(MouseEvent.MOUSE_MOVE,moveHandler);
				if(cv2.x<(0-minXObj))//最左边
			{
				this.cv2.x =(0-minXObj);
			}
			var temp1:Number=cv2.width-(maxXObj+demo.width);
			if(cv2.x>=this.width-(cv2.width-temp1))//最上面
			{
				cv2.x=this.width-(cv2.width-temp1);
			}
			if(this.cv2.y <= (0-minYObj)){
				this.cv2.y = (0-minYObj);
			}
			var temp2:Number=cv2.height-(maxYObj+demo.height);
			if(this.cv2.y >=this.height-(cv2.height-temp2)){//最上面
				cv2.y=this.height-(cv2.height-temp2);
			}
				this.cv2.stopDrag();
		}
		
		private function moveHandler(event:MouseEvent):void{
			if(cv2.x<(0-minXObj))//最左边
			{
				this.cv2.x =(0-minXObj);
				this.cv2.stopDrag();
			}
			var temp1:Number=cv2.width-(maxXObj+demo.width);
			if(cv2.x>=this.width-(cv2.width-temp1))//最上面
			{
				cv2.x=this.width-(cv2.width-temp1);
				this.cv2.stopDrag();
			}
			if(this.cv2.y <= (0-minYObj)){//最上面
				this.cv2.y = (0-minYObj);
				this.cv2.stopDrag();
			}
			var temp2:Number=cv2.height-(maxYObj+demo.height);
			if(this.cv2.y >=this.height-(cv2.height-temp2)){//最下面
				cv2.y=this.height-(cv2.height-temp2);
				this.cv2.stopDrag();
			}
		}
	]]>
</mx:Script>
		<mx:Canvas id="cv2" x="0" y="39" width="197" height="159" verticalScrollPolicy="off" horizontalScrollPolicy="off" 
		backgroundColor="green" buttonMode="true" 
		mouseDown="mouseDownHandler()" mouseUp="mouseUpHandler()">
		<mx:Button id="demo" label="demo" x="10" y="38"/>
		<mx:Button label="demo" x="76" y="60"/>
		<mx:Button label="demo" x="28" y="90"/>
	</mx:Canvas>

e.move()方法控制

  <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="<a href="http://www.adobe.com/2006/mxml">http://www.adobe.com/2006/mxml</a>" layout="absolute">
   <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            private var regX:Number;
            private var regY:Number;
            public var closeButton : UIComponent;
            protected function startDragging(event : MouseEvent) : void
            {
                regX = event.stageX - demo.x;
                regY = event.stageY - demo.y;
                systemManager.addEventListener(
                    MouseEvent.MOUSE_MOVE, systemManager_mouseMoveHandler, true);
                systemManager.addEventListener(
                    MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);
                systemManager.stage.addEventListener(
                    Event.MOUSE_LEAVE, stage_mouseLeaveHandler); 
            }
            protected function stopDragging() : void
            {
                systemManager.removeEventListener(
                    MouseEvent.MOUSE_MOVE, systemManager_mouseMoveHandler, true);
        
                systemManager.removeEventListener(
                    MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);
        
                /* systemManager.stage.removeEventListener(
                    Event.MOUSE_LEAVE, stage_mouseLeaveHandler); */
        
                regX = NaN;
                regY = NaN;
            }
            /**
             *  @private
             */
            private function titleBar_mouseDownHandler(event:MouseEvent) : void
            {
                    startDragging(event);
            }
             var tempx:Number;
             var tempy:Number;
            private function systemManager_mouseMoveHandler(event:MouseEvent) : void
            {
                event.stopImmediatePropagation();
                tempx=event.stageX - regX;
                tempy=event.stageY - regY;
                if(tempx<0)
                {
                 tempx=0; 
                }
                if(tempx>this.width-demo.width)
                {
                 tempx=this.width-demo.width;
                }
                if(tempy<0)
                {
                 tempy=0; 
                }
                if(tempy>this.height-demo.height)
                {
                 tempy=this.height-demo.height; 
                }
                demo.move(tempx,tempy);
            }
            private function systemManager_mouseUpHandler(event:MouseEvent) : void
            {
                if (!isNaN(regX))
                    stopDragging();
            }
            private function stage_mouseLeaveHandler(event:Event) : void
            {
                if (!isNaN(regX))
                    stopDragging();
            }
        ]]>
    </mx:Script>
<mx:HBox id="demo"  backgroundColor="green" mouseDown="{titleBar_mouseDownHandler(event)}" width="141" height="147" x="282" y="156">
</mx:HBox>
</mx:Application>

f.DragManager拖动

DragManager 类管理拖放操作，您可以使用它来将数据从 Flex 应用程序中的一个位置移动到另一位置。例如，您可以选择一个对象（如 List 控件中的项目）或一个 Flex 控件（如 Image 控件），然后将其拖至另一个组件进行添加。

1.DragManager.showFeedback(feedback:String):void参数feedback可选值
DragManager.COPY 在拖动鼠标，并按下Crtl键时显示一个带有一个白色加号的绿色圆圈表示可以放置

DragManager.LINK 在拖动鼠标，并按下shift键时出现一个带有白色箭头的圆圈
DragManager.MOVE 仅一个箭头表示当前可以拖放
DragManager.NONE表示不能放置的图标

简单例子：

<?xml version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">   
    <mx:Script>   
        <![CDATA[
        	import mx.controls.Alert;
        	import mx.controls.Label;   
            import mx.core.IUIComponent;   
            import mx.containers.Box;   
            import mx.containers.Canvas;   
            import mx.events.DragEvent;   
            import mx.managers.DragManager;   
            import mx.core.DragSource;   
            import mx.core.UIComponent;   
            private static const FORMAT:String = "box";   
  
            private function boxMouseDownHandler(evt:MouseEvent):void{   
                var iu:Box = evt.currentTarget as Box;   
                var dragSource:DragSource = new DragSource();   
                dragSource.addData( iu, FORMAT );   
//                lbl.setStyle("backgroundColor","red");
                DragManager.doDrag( iu, dragSource, evt );   
            }   
               
            private function canvasDragEnterHandler(evt:DragEvent):void{   
                if(evt.dragSource.hasFormat(FORMAT)){   
                    DragManager.acceptDragDrop(Canvas(evt.currentTarget));   
                }   
            }   
               
            private function canvasDragHandler(evt:DragEvent):void{   
                var box:Box = Box(evt.dragInitiator);   
                box.x = evt.localX;   
                box.y = evt.localY;   
            }   

        ]]>   
    </mx:Script>   
       
    <mx:Canvas backgroundColor="0xEEEEEE" width="652"  verticalScrollPolicy="off" horizontalScrollPolicy="off" height="320" horizontalCenter="0" verticalCenter="0" dragEnter="canvasDragEnterHandler(event)"  dragDrop="canvasDragHandler(event)">   
        <mx:Box id="box"  width="54" height="66"  x="80" y="79" mouseDown="boxMouseDownHandler(event)" focusEnabled="true" >
        	        <mx:Image source="file.png" width="41" height="36" x="111" y="121"/>
        </mx:Box>   

    </mx:Canvas>   
</mx:Application>

2.拖拽显示拖拽对象的缩略图，遗憾的是DragManager 对拖拽区域控制的不是很好

<?xml version="1.0"?>
<!-- dragdrop\DandDImageProxy.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            //Import classes so you don't have to use full names.
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;

            [Embed(source='1.png')]
            public var globeImage:Class;

            private function mouseOverHandler(event:MouseEvent):void 
            {                
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "img");               
                var imageProxy:Image = new Image();
                imageProxy.source = globeImage;
                imageProxy.height=60;
                imageProxy.width=40;                
                DragManager.doDrag(dragInitiator, ds, event, 
                    imageProxy, -15, -15, 1.00);
            }
            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("img"))
                {
                    DragManager.acceptDragDrop(Canvas(event.currentTarget));
                }
            }

            private function dragDropHandler(event:DragEvent):void {
                Image(event.dragInitiator).x = 
                    Canvas(event.currentTarget).mouseX;
                Image(event.dragInitiator).y = 
                    Canvas(event.currentTarget).mouseY;
            }
        ]]>
    </mx:Script>
    
    <!-- The Canvas is the drag target --> 
    <mx:Canvas id="v1" 
        width="500" height="500"  
        borderStyle="solid" 
        backgroundColor="#DDDDDD"
        dragEnter="dragEnterHandler(event);" 
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        dragDrop="dragDropHandler(event);">
        
        <!-- The image is the drag initiator. -->
        <mx:Image id="myimg" 
            source="@Embed(source='1.png')" 
            mouseMove="mouseOverHandler(event);"/> 
    </mx:Canvas>
</mx:Application>

3.拖拽显示拖拽对象的缩略图，控制拖拽区域:

<?xml version="1.0"?>
<!-- dragdrop\DandDImageProxy.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            //Import classes so you don't have to use full names.
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;

            [Embed(source='1.png')]
            public var globeImage:Class;

            private function mouseOverHandler(event:MouseEvent):void 
            {                
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "img");               
                var imageProxy:Image = new Image();
                imageProxy.source = globeImage;
                imageProxy.height=60;
                imageProxy.width=40;                
                DragManager.doDrag(dragInitiator, ds, event, 
                    imageProxy, -15, -15, 1.00);
            }
            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("img"))
                {
                    DragManager.acceptDragDrop(Canvas(event.currentTarget));
                }
            }

            private function dragDropHandler(event:DragEvent):void {
                Image(event.dragInitiator).x = 
                    Canvas(event.currentTarget).mouseX;
                Image(event.dragInitiator).y = 
                    Canvas(event.currentTarget).mouseY;
                    if(Image(event.dragInitiator).x <0)
                    {
                    	Image(event.dragInitiator).x =0;
                    }
                    if(Image(event.dragInitiator).x >v1.width-Image(event.dragInitiator).width)
                    {
                    	Image(event.dragInitiator).x =v1.width-Image(event.dragInitiator).width;
                    }
                    if(Image(event.dragInitiator).y<0)
                    {
                    	Image(event.dragInitiator).y=0;
                    }
                    if(Image(event.dragInitiator).y>v1.height-Image(event.dragInitiator).height)
                    {
                    	Image(event.dragInitiator).y=v1.height-Image(event.dragInitiator).height;
                    }
            }
        ]]>
    </mx:Script>
    
    <!-- The Canvas is the drag target --> 
    <mx:Canvas id="v1" 
        width="500" height="500"  
        borderStyle="solid" 
        backgroundColor="#DDDDDD"
        dragEnter="dragEnterHandler(event);" 
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        dragDrop="dragDropHandler(event);">
        
        <!-- The image is the drag initiator. -->
        <mx:Image id="myimg" 
            source="@Embed(source='1.png')" 
            mouseMove="mouseOverHandler(event);"/> 
    </mx:Canvas>
</mx:Application>