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

“放下目标”

一个放下目标可以使用多种事件，最重要的事件是dragEnter,dragDrop和dragExit时间。

dragEnter事件

dragEnter事件在带有“拖动代理(drag proxy)”鼠标从外部进入“放下目标”的时候分发。一个组件要作为“放下目标”必须定义这个事件监听器。在这个监听器中，你可以改变“放下目标”的外观，从而向用户提供一个反馈，表明这个组件可以接受拖动操作。例如你可以在“放下目标”周围画一个框，或者给“放下目标”一个焦点。

dragExit事件

dragExit事件在用户鼠标没有在“放下目标”上放下，而是移除鼠标的时候分发。如果在dragEnter或其他事件中修改了“放下目标”的外观，你可以在这个事件中恢复到正常的外观。

dragDrop事件

dragDrop事件在用户在“放下目标”上放开鼠标的时候分发。你可以使用这个事件监听器向“放下目标”中增加drag的数据。

在下边的例子中，创建一个Box容器担当“放下目标”，并且定义dragEnter,dragExit和dragDrop事件监听器。Box容器包含一个Label控件，用来显示放到Box上的硬币的总和

在dragEnter事件监听器中，检查拖动源对象中是否包含value格式。只有对象包含这个格式才可以被放到这个“放下目标”上。如果包含，给用户一个可视化的反馈，通过变粗Box容器的。通过调用DragManager的acceptDrapDrop方法，告诉DragManager,Box容器要接受这个“拖动开始点”。

在dragExit的事件监听器中，恢复Box的外观以表明“拖动代理”已经不在它上边了。

最后，在drapDrop的事件监听器中，当用户把硬币放到“放下目标”上时获得调用，用硬币的值增加totalValue的值，并且回复Box的外观，以表明放下操作完成。

例子

    xmlns:mx=" http://www.adobe.com/2006/mxml"
    width="525" height="270"
     viewSourceURL="src/DragAndDropDragDropTargetEvents/index.html"
>

   
                    import mx.events.DragEvent;
            import mx.containers.Box;
            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;
            [Bindable]

            private var totalValue:uint;

            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);
            }

            // Called if the user drags a drag proxy onto the drop target.
            private function dragEnterHandler(event:DragEvent):void
            {

                // Get the drop target component from the event object.
                var dropTarget:Box=event.currentTarget as Box;
                // Accept the drag only if the user is dragging data
                // identified by the 'value' format value.

                if (event.dragSource.hasFormat('value'))
                {
                    // Make the border of the Box thicker to
                    // visually signal to the user that they can
                    // drop the coin there.

                    dropTarget.setStyle("borderThickness", 5);
                    // Accept the drop.
                    DragManager.acceptDragDrop(dropTarget);
                }
            }

            // Called if the user drags the drag proxy away from the drop target.
            private function dragExitHandler(event:DragEvent):void
            {

                // Get the drop target component from the event object.
                var dropTarget:Box=event.currentTarget as Box;               
                // Set the border of the Box to its default value
                // to visually indicate that the user is no longer
                // over the drop target.

                revertBoxBorder();               
            }                   
            // Called if the target accepts the dragged object and the user
            // releases the mouse button while over the drop target.
            private function dragDropHandler(event:DragEvent):void
            {

                // Get the data identified by the color format from the drag source.
                var value:uint = event.dragSource.dataForFormat('value') as uint;

                // Add the value to the total

                totalValue += value;
                // Set the border of the Box to its default value
                revertBoxBorder();               
            }
            // Helper method to revert the Box's border to a 1 pixel outline.
            private function revertBoxBorder():void

            {
                amountDisplay.setStyle("borderThickness", 1);               
            }
        ]]>
   

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

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

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

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

        />       
   
   
        id="amountDisplay"
        borderStyle="solid" borderColor="#000000" backgroundColor="#FFFFFF"

        width="100%" height="100" horizontalAlign="center" verticalAlign="middle"

        dragEnter="dragEnterHandler(event);"

        dragExit="dragExitHandler(event);"
        dragDrop="dragDropHandler(event);"

    >