[flexcoders] Only DragEvent.DRAG_ENTER fires in Custom Component

[Mark Forsberg]

I have the following custom component that allows a user to drag an 
item from a datagrid into an image of a trashcan located in the 
titleBar of the panel housing the datagrid for deletion from the 
grid.

The custom component renders fine, but the only DragEvent that is 
captured is the DRAG_ENTER. Do I need to do something different to 
capture the other Drag Events, particularly the DRAG_DROP?
Thanks.

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"; width="612" 
height="306" headerHeight="25">

<mx:Script>
 <![CDATA[
    import mx.events.DragEvent;
    import mx.containers.Panel;
    import mx.controls.Image;
    import mx.containers.HBox;
    import flash.events.MouseEvent;
    import mx.controls.Alert;
     
    //Embed Images
                
    [Embed("../Images/images.jpg")]
    public var trashcan:Class;
                
    //Declare UI Elements that go into the Panel Titlebar
    private var myTrashcan:Image;
    private var myHBox:HBox;
                
    private function dragEnterEvent(event:DragEvent):void{
      Alert.show("DragEnter");
    }
                
    private function myDropEvent(event:DragEvent):void{
      Alert.show("DragDrop");
    }

    override protected function createChildren():void{
      super.createChildren();
      myTrashcan = new Image();
      myTrashcan.source = trashcan;
      myTrashcan.width = 21;
      myTrashcan.height = 29;
      
myTrashcan.addEventListenerDragEvent.DRAG_ENTER,dragEnterEvent);
myTrashcan.addEventListener(DragEvent.DRAG_DROP,myDropEvent);
myTrashcan.addEventListener(DragEvent.DRAG_OVER,dragEnterEvent);
myTrashcan.addEventListener(DragEvent.DRAG_EXIT,myDropEvent);
myTrashcan.addEventListener(DragEvent.DRAG_COMPLETE,myDropEvent);
                        
     myHBox = new HBox();
     myHBox.addChild(myTrashcan);
    
    // Add the HBox and the icons to the titleBar display 
    titleBar.addChild( myHBox );
    }   
                
    override protected function    
updateDisplayListunscaledWidth:Number, unscaledHeight:Number):void{
  super.updateDisplayList(unscaledWidth,unscaledHeight);
  
     myHBox.setActualSize(myHBox.getExplicitOrMeasuredWidth
(),myHBox.getExplicitOrMeasuredHeight() );
            
     // Position the HBox 
     var y:int = 4;
     var x:int = this.width - myHBox.width - 12;
     myHBox.move(x, y);
  }

      ]]>
   </mx:Script>

        
</mx:Panel>