Flex拖拽

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

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


Flex代码

1. 例子
2.
3. private static function init():void{
4. myVBox.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
5. myVBox.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
6. }
7.
8. // 按下鼠标按键时会调用此函数。
9. private static function startDragging(event:MouseEvent):void
10. {
11. event.currentTarget.startDrag();
12. }
13.
14. // 松开鼠标按键时会调用此函数。
15.
16. private static function stopDragging(event:MouseEvent):void
17. {
18. event.currentTarget.stopDrag();
19. }

例子

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完成。
Flex代码

1. 例子
2.
3. private function init():void
4. {
5. a.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
6. c.addEventListener(DragEvent.DRAG_ENTER,dragEnterHandler);
7. c.addEventListener(DragEvent.DRAG_DROP,dragDropHandler);
8. }
9.
10.
11. private static function mouseDownHandler(event:MouseEvent):void
12. {
13. var dragInitiator:UIComponent=UIComponent(event.currentTarget);
14. var ds:DragSource = new DragSource();
15. ds.addData(dragInitiator, "myRule");
16. DragManager.doDrag(dragInitiator, ds, event);
17. }
18.
19.
20. private static function dragEnterHandler(event:DragEvent):void {
21. if (event.dragSource.hasFormat("myRule "))
22. {
23. DragManager.acceptDragDrop(event.currentTarget);
24. }
25. }
26.
27.
28. private static function dragDropHandler(event:DragEvent):void {
29. var dragObject:UIComponent=UIComponent(event.dragInitiator);
30. dragObject.x = Container(event.currentTarget).mouseX;
31. dragObject.y =Container(event.currentTarget).mouseY;
32. if(dragObject.parent!=event.currentTarget){
33. Container(event.currentTarget).addChild(dragObject);
34. }
35. }
36.
37. 以上的例子中，c只接受带有“myRule”格式文字的拖动对象

例子

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值。相对前两种方法，这种方法实现起来就比较烦琐。具体事件这里就不写了.

总之，在flash的拖拽实现要比在js中容易一些。