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