目的:
在Group容器中实现子容器gp1及其gp1内部子组件随gp1组件的拖动效果。
实现:
1.初始化时,注册鼠标按下事件:
public function onInit():void
{
...
gp1.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
...
}
2.鼠标按下响应函数:
public function onMouseDown(e:MouseEvent):void
{
//oldEventX = e.localX;
//oldEventY = e.localY;
oldEventX = gp1.mouseX;
oldEventY = gp1.mouseY;
gp1.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
gp1.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
3.随着鼠标移动而移动组件:
public function onMouseMove(e:MouseEvent):void
{
if(e.localX != 0 && e.localX!= 0)
{
// offSetX = e.localX -oldEventX;
// offSetY = e.localY -oldEventY;
offSetX = gp1.mouseX -oldEventX;
offSetY = gp1.mouseY -oldEventY;
gp1.x += offSetX;
gp1.y += offSetY;
}
}
4.鼠标抬起时,注销移动和抬起事件:
public function onMouseUp(e:MouseEvent):void
{
gp1.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
gp1.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
效果:
到此,按照上面的步骤(使用绿色部分代码,注释红色代码),得到的效果为:在移动组件的过程中,有时会出现得到的e.localX/Y突然变得特别大的情况,从而组件移动到屏幕外面的情况;
原因:
每次在移动过程中事件e.target不唯一,不一定是gp1,有时为gp1中的子组件,所以e.localX/Y不唯一。
查看Flex帮助:
mx.core.UIComponent.mouseX():Number
-
[只读] 指示此鼠标或用户输入设备位置的 x 坐标,以像素为单位。
flash.events.MouseEvent.localX():Number
-
事件发生点相对于所属 Sprite 的水平坐标。
flash.events.MouseEvent.stageX():Number
-
[只读] 事件发生点在全局舞台坐标中的水平坐标。当设置
localX
属性时会计算此属性。