[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的外观，以表明放下操作完成。
例子


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