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>