flex drag

最新推荐文章于 2014-03-01 17:06:02 发布

原创最新推荐文章于 2014-03-01 17:06:02 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

Adobe 专栏收录该内容

69 篇文章

订阅专栏

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

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

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

2.拖拽区域限制

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

3.拖拽多个原理:把需要拖拽的对象放入一个容器中拖拽这个容器

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>

4.拖拽多个控制拖拽区域(容器中x轴最小,最大的元素，y轴最大最小的元素)

<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>

5.Move()方法控制

  <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 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>

6.使用DragManager拖拽
DragManager参考连接：
http://demojava.iteye.com/blog/1183448