读书人

Flex组件拖拽(3)

发布时间: 2012-09-02 21:00:34 作者: rapoo

Flex组件拖拽(三)
一、最最简单的是直接调用ui组件的startDrag方法和stopDragging方法,这2个方法是flash中的所有继承于Sprite类的组件类都支持的。适用于在同一个容器中的拖拽。

思路是监听需要拖拽的组件的MOUSE_DOWN和MOUSE_UP事件,剩下来的有flash帮你自动完成。

eg:

private static function init():void{

myVBox.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);

myVBox.addEventListener(MouseEvent.MOUSE_UP, stopDragging);


}

// 按下鼠标按键时会调用此函数。

private static function startDragging(event:MouseEvent):void

{

event.currentTarget.startDrag();

}

// 松开鼠标按键时会调用此函数。

private static function stopDragging(event:MouseEvent):void

{

event.currentTarget.stopDrag();

}

二、借助DragManager实现拖拽。好处是可以方便的控制哪些容器支持被拖拽,也就是方便的订制拖拽的业务规则。适用于多个容器之间的拖拽。

假设把a组件从b容器拖拽到c容器

思路是对a监听鼠标MOUSE_DOWN事件,对c监听DRAG_ENTER和DRAG_DROP事件。其他的由flash完成。

eg:

private function init():void

{

a.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

c.addEventListener(DragEvent.DRAG_ENTER,dragEnterHandler);

c.addEventListener(DragEvent.DRAG_DROP,dragDropHandler);

}


private static function mouseDownHandler(event:MouseEvent):void

{

var dragInitiator:UIComponent=UIComponent(event.currentTarget);

var ds:DragSource = new DragSource();

ds.addData(dragInitiator, "myRule");

DragManager.doDrag(dragInitiator, ds, event);

}





private static function dragEnterHandler(event:DragEvent):void {

if (event.dragSource.hasFormat("myRule "))

{

DragManager.acceptDragDrop(event.currentTarget);

}

}



private static function dragDropHandler(event:DragEvent):void {

var dragObject:UIComponent=UIComponent(event.dragInitiator);
dragObject.x = Container(event.currentTarget).mouseX;

dragObject.y =Container(event.currentTarget).mouseY;
if(dragObject.parent!=event.currentTarget){
Container(event.currentTarget).addChild(dragObject);
}

}

以上的例子中,c只接受带有“myRule”格式文字的拖动对象

三、完全自己实现拖拽功能。拖拽无非是ui组件跟着鼠标移动。所以需要监听MOUSE_DOWN,MOUSE_UP,MOUSE_MOVE事件,有时拖拽的目标容器也要监听MOUSE_UP事件。然后在MOUSE_MOVE事件的监听函数中改变ui组件的x和y值


读书人网 >flex

热点推荐