[AIR] Drag Problem (parent & children can receive d&d and HTML Control)

Question

Hi,
I have a problem regarding drag and drop in AIR. The d&d involving parent & children that can receive d&d event and the children can contain HTML control. You might want to copy and paste the code below to get a better idea.
The objectives are:
1. If you drag the green object and drop it in the black area, it should alert "Parent Drop"
2. If you drag the green object and drop it in the magenta (purple) color, it should alert "Child Drop"
3. If you drag the green object and drop it in the white (HTML control) color, it should alert "HTML Drop"
The problems:
1. drag green object to black area, to magenta area, and back again to black area. Drop it, the alert is not shown
2. drag green object to the white area (HTML control). Drop it, the alert is not shown
Many thanks.
The Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
     <mx:VBox verticalGap="0" x="50" y="50" width="200" height="200" backgroundColor="#000000" horizontalAlign="center" dragEnter="onParentDragEnter(event)" dragDrop="onParentDrop(event)">
          <mx:Canvas id="canvas1" width="50" height="50" backgroundColor="#00ff00" mouseMove="onMouseMove(event)"/>
          <mx:HTML id="html" width="50" height="50" dragEnter="onHtmlDragEnter(event)" dragDrop="onHtmlDrop(event)"/>
          <mx:Canvas id="canvas2" width="60" height="50" backgroundColor="#ff00ff" dragEnter="onChildDragEnter(event)" dragDrop="onChildDrop(event)"/>
     </mx:VBox>
     <mx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.DragEvent;
               import mx.managers.DragManager;
               import mx.core.DragSource;
               public function init():void
                    html.htmlText = '<div style="font-size:small">HTML Control</div>';
               public function onMouseMove(event:MouseEvent):void
                    var dragInitiator:Canvas = event.currentTarget as Canvas;
                    var ds:DragSource = new DragSource();
                    ds.addData("item", "item");
                    DragManager.doDrag(dragInitiator, ds, event, dragInitiator);
               public function onChildDragEnter(event:Event):void
                    trace("onChildDragEnter");
                    DragManager.acceptDragDrop(event.currentTarget as Canvas);
               public function onParentDragEnter(event:Event):void
                    trace("onParentDragEnter");
                    DragManager.acceptDragDrop(event.currentTarget as VBox);
               public function onChildDrop(event:DragEvent):void
                    trace("onchilddrop");
                    Alert.show("Child Drop");
               public function onParentDrop(event:DragEvent):void
                    trace("onparentdrop");
                    Alert.show("Parent Drop");
               public function onHtmlDragEnter(event:DragEvent):void
                    DragManager.acceptDragDrop(event.currentTarget as HTML);
               public function onHtmlDrop(event:DragEvent):void
                    Alert.show("HTML Drop");
          ]]>
     </mx:Script>
</mx:WindowedApplication>

Answer 1

The parent drop issue is because there can only be one drag acceptor and you don't get another dragEnter event when the mouse leaves the child (since technically, it never left the parent). This isn't as big an issue as it might seem, since generally you wouldn't have both a parent and a child that could take the drop. The ways to fix this are to use the dragOver event in addition to dragEnter or you could handle the dragExit event dispatched by the child and set the drag acceptor back to the parent.
The HTML control issue is a bit trickier. HTML content has its own drag-and-drop system that operates a bit differently than the ActionScript version. I don't think there is a way to intercept the events before they are handled by the WebKit HTML engine. You can accept a drop in HTML/JavaScript code as described here: http://help.adobe.com/en_US/as3/dev/WS6717AA0A-2B7D-4728-86DC-7D60F919E6B4.html.