Flex中的拖放(Drag-Drop)事件入门

 对于一些控件如DataGrid,HorizontalList,List,Menu,PrintDataGrid,TileList,Tree等,我们可以通过设置控件属性dragEnabled,dropEnabled,dragMoveEnabled来很方便的实现拖放效果,但是当我们面临一些不是基于列表控件(non-list-based)的组件
或者容器时,我们该如何使之支持拖放事件呢? FLEX为我们提供了一些类和事件来让我们可以手工写出支持拖放事件的代码,我们可以通过DragManager,DragSource和DragEvent来实现拖放操作.

  拖曳初始化事件(Drag initiator events)
  当我们想把一个控件当作一个拖曳控件(Drag initiator)来使用,我们可以通过mouseDown,mouseMove,dragComplete事件来控制拖放操作.

  鼠标锁定事件和鼠标移动事件(mouseDown events and mouseMove events)
  鼠标锁定事件在当你选择住某个控件并且一直按住鼠标按钮时被触发.
  鼠标移动事件在当你鼠标移动时触发.

  以下的例子里使用图片控件(Image control)内嵌了4张图片(1分,2分,5分和10分硬币的图片).对于每一个图片控件,我们都定义了mouseMove事件,并且定义了一个事件处理方法dragIt()来处理这个事件. 在dragIt()方法里,我们获得一个指向当前硬币图片事件的引用,该引用指到该事件对象的currentTarget属性.我们把它保存为本地对象并命名为dragInitiator.

  接下来我们创建一个DragSource的实例,在其中创建一个addData()方法获取由dragIt()方法传过来的value参数,这个参数用于以后处理Drop事件时使用.

  当我们拖动目标时,我们想让这个硬币图片跟随鼠标移动,我们可以通过创建一个图片实例(Image instance),把这个实例的source属性指到当前拖动的图片目标上去,我们把新创建这个图片实例保存为本地变量dragProxy

  最后我们通过使用DragManager类中的静态方法doDrag(),然后指定相关的drag initiator, drag source, event object, 就可以开始拖曳操作了.

  在这个例子里,你可以拖动图片对象到任何地方,但是无法放置, 因为我们并没有指定任何被放置的对象.

 1 <? xml version="1.0" encoding="utf-8" ?>
 2 < mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
 3     width ="500"  height ="160" >
 4     
 5      < mx:Script >
 6          <![CDATA[
 7             import mx.controls.Image;
 8             import mx.managers.DragManager;
 9             import mx.core.DragSource;
10             
11             [Embed('assets/1c.png')]
12             [Bindable]
13             public var OneCent:Class;
14             
15             [Embed('assets/2c.png')]
16             [Bindable]
17             public var TwoCents:Class;
18             
19             [Embed('assets/5c.png')]
20             [Bindable]
21             public var FiveCents:Class;
22             
23             [Embed('assets/10c.png')]
24             [Bindable]
25             public var TenCents:Class;
26             
27             private function dragIt(event:MouseEvent, value:uint):void {
28                 var dragInitiator:Image = event.target as Image;
29                 
30                 var dragSource:DragSource = new DragSource();
31                 dragSource.addData(value,'value');
32                 
33                 var dragProxy:Image    = new Image();
34                 dragProxy.source = event.currentTarget.source;
35                 
36                 DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
37             }            
38          ]]>
39      </ mx:Script >
40     
41      < mx:HBox >
42
43          < mx:Image 
44              id ="oneCent"  source ="{OneCent}"
45             mouseMove ="dragIt(event, 1);"
46
47          />
48          < mx:Image 
49              id ="twoCents"  source ="{TwoCents}"
50             mouseMove ="dragIt(event, 2);"
51
52          />
53          < mx:Image 
54              id ="fiveCents"  source ="{FiveCents}"
55             mouseMove ="dragIt(event, 5);"
56
57          />
58          < mx:Image 
59              id ="tenCents"  source ="{TenCents}"
60             mouseMove ="dragIt(event, 10);"
61
62          />         
63      </ mx:HBox >
64
65 </ mx:Application >
66

想实践的话随便搞4张差不多的图片放到flex项目的assets下,对应好命名,就可使用.

<?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 icon image.
            [Embed(source='assets/globe.jpg')]
            public var globeImage:Class;

            // The mouseMove event handler for the Image control
            // initiates the drag-and-drop operation.
            private function mouseOverHandler(event:MouseEvent):void 
            {                
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "img");               

                // The drag manager uses the Image control 
                // as the drag proxy and sets the alpha to 1.0 (opaque),
                // so it appears to be dragged across the Canvas.
                var imageProxy:Image = new Image();
                imageProxy.source = globeImage;
                imageProxy.height=15;
                imageProxy.width=15;                
                DragManager.doDrag(dragInitiator, ds, event, 
                    imageProxy, -15, -15, 1.00);
            }
            
            // The dragEnter event handler for the Canvas container
            // enables dropping.
            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("img"))
                {
                    DragManager.acceptDragDrop(Canvas(event.currentTarget));
                }
            }

            // The dragDrop event handler for the Canvas container
            // sets the Image control's position by 
            // "dropping" it in its new location.
            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);" 
        dragDrop="dragDropHandler(event);">
        
        <!-- The image is the drag initiator. -->
        <mx:Image id="myimg" 
            source="@Embed(source='assets/globe.jpg')" 
            mouseMove="mouseOverHandler(event);"/> 
    </mx:Canvas>
</mx:Application>