2.非加强拖动技术
Label的拖动,可以扩展到其他组件
Button的拖动,可以扩展到其他组件
- <?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中添加图片等。
- <?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.图片的拖动
- <?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>