[zt]Flex 3: 构建高级用户界面 添加拖放支持4

手工添加拖放功能
想要让非基于list的控件或容器支持拖放操作，必须明确的添加一系列指定的类和方法。使用DragManager,DragSource和DragEvent类来实现拖放操作。

Flex应用程序使用时间来控制拖放操作。

拖动开始事件

当你把一个控制设置为“拖动开始点”，你可以使用mouseDown，mouseMove和dragComplete事件来管理拖放操作。

关于mouseDown和mouseMove事件

mouseDown事件在用户用鼠标选中并且按下鼠标键开始分发。mouseMove时间在鼠标移动的时候开始分发。

下边的例子嵌入了4个欧元硬币（1分，2分，5分，10分）图片，兵器使用Image控件显示他们。在每一个Image控件中，监听mouseMove事件并且定义事件处理器方法，这个方法被命名为dragIt()。在dragIt()方法中，使用事件的currentTarget属性，获得事件源硬币图片的引用，然后吧这个引用放入到drageInitiator这个本地变量中。

下一步，创建一个DragSource实例，并且调用她的addData()方法来保存dragIt方法的value参数。使用字符串"value"来描述value参数的格式。一会，当你创建“放下目标”时，你将使用这个字符串，来检查是否允许一个元素，放到某个组件上。

想要显示一个硬币图片作为用户拖动它的标志，需要创建一个图片实例，这个图片与“拖动开始点”的图片是一样的。把这个图片保存在dragProxy这个本地变量中。

最后，调用DragManager的静态方法doDrag()，并且把图片发生点，拖动源，事件对象，和拖动代理类传送给它，开始拖动操作。

你可以随意拖动硬币，但是在任何地方都放不下它。因为你还没有定义“放下目标”。下一节，将讲述如何定义“放下目标”。

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"    
    viewSourceURL="src/DragAndDropDragInitiatorEvents/index.html"

    width="500" height="160"
>
    <mx:Script>
        <![CDATA[

            import mx.managers.DragManager;
            import mx.core.DragSource;
            // Embed the various Euro coin images. Images originally
            // from Wikipedia (http://en.wikipedia.org/wiki/Euro_coins)
            [Embed("assets/1c.png")]

            [Bindable]
            public var OneCent:Class;
            [Embed("assets/2c.png")]

            [Bindable]
            public var TwoCents:Class;
            [Embed("assets/5c.png")]

            [Bindable]
            public var FiveCents:Class;
            [Embed("assets/10c.png")]

            [Bindable]
            public var TenCents:Class;

            private function dragIt(event:MouseEvent, value:uint):void
            {

                // Get the drag initiator component from the event object.
                var dragInitiator:Image = event.currentTarget as Image;
                // Create a DragSource object.
                var dragSource:DragSource = new DragSource();
                // Add the data to the object.

                dragSource.addData(value, 'value');
                // Create a copy of the coin image to use as a drag proxy.
                var dragProxy:Image = new Image();
                dragProxy.source = event.currentTarget.source;
                // Call the DragManager doDrag() method to start the drag.

                DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
            }

        ]]>
    </mx:Script>
    <mx:HBox>

        <mx:Image
            id="oneCent" source="{OneCent}"
            mouseMove="dragIt(event, 1);"

        />
        <mx:Image
            id="twoCents" source="{TwoCents}"
            mouseMove="dragIt(event, 2);"

        />
        <mx:Image
            id="fiveCents" source="{FiveCents}"
            mouseMove="dragIt(event, 5);"

        />
        <mx:Image
            id="tenCents" source="{TenCents}"
            mouseMove="dragIt(event, 10);"

        />       
    </mx:HBox>
</mx:Application>