How to handle D-n-D to a Sprite?

Question

Hi,

I need to detect when a user Drag-n-Drop an object into a sprite. Here's a sample app that illustrates the issue. It never gets to the alert:

tks.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      creationComplete="ini(event)">

 <s:layout>
  <s:VerticalLayout />
 </s:layout>

 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.controls.Image;
   import mx.core.DragSource;
   import mx.core.IUIComponent;
   import mx.core.UIComponent;
   import mx.effects.effectClasses.AddRemoveEffectTargetFilter;
   import mx.events.DragEvent;
   import mx.events.FlexEvent;
   import mx.graphics.ImageSnapshot;
   import mx.managers.DragManager;

   private var sprite:Sprite;
   private var uiref:UIComponent = new UIComponent();;

   protected function ini(event:FlexEvent):void
   {
    uiref = new UIComponent();
    uiref.percentWidth = 100;
    uiref.percentHeight = 100;
    holder.addElement( uiref );


    sprite = new Sprite();
    sprite.graphics.beginFill(0xFFFF00);
    sprite.graphics.drawRect( 0, 0, 300, 300 );
    sprite.width = 300;
    sprite.height = 300;

    sprite.addEventListener( DragEvent.DRAG_ENTER, dragEnterHandler, false, 0, true);
    sprite.addEventListener( DragEvent.DRAG_EXIT, dragExitHandler, false, 0, true);
    sprite.addEventListener( DragEvent.DRAG_DROP, dragDropHandler, false, 0, true);
    sprite.addEventListener( MouseEvent.CLICK, clickHandler, false, 0, true); 

    uiref.addChild( sprite );

   }

   private function dragEnterHandler(event:DragEvent):void
   {
    trace('dragEnterHandler ' + event.type + '.....');
    if( event.dragSource.hasFormat( 'xxx' ) ){
     trace('acceptDragDrop' );
     DragManager.acceptDragDrop( event.currentTarget.parent as IUIComponent );
    }
   }

   private function dragExitHandler(event:DragEvent):void
   {
    trace('dragExitHandler ' + event.type + '------');
   }

   private function dragDropHandler(event:DragEvent):void
   {
    trace('dragDropHandler ' + event.type + '!!!!!');
    Alert.show('dragDropHandler');
   }


   private function doDrag(event:MouseEvent):void
   {
    var d:Object = new Object();

    var dragSource:DragSource = new DragSource();
    dragSource.addData(d, 'xxx');
    var bm:Bitmap = new Bitmap(ImageSnapshot.captureBitmapData(btn));
    var dragProxy:Image = new Image();
    dragProxy.source = bm;
    DragManager.doDrag(this, dragSource, event, dragProxy, 0, -(event.localY+20), 0.4);
   }

   private function clickHandler(event:MouseEvent):void
   {
    trace('clickHandler------');
   }

  ]]>
 </fx:Script>


 <s:Button label="DRAG ME" mouseDown="doDrag(event)" id="btn" />
 <s:BorderContainer id="holder" width="300" height="300" minHeight="20" borderColor="#515151" >
 </s:BorderContainer>

</s:Application>