drop in an HBox

Question

I have this HBox with drop functionality:

SCRIPT:

// The dragEnter event handler for the HBox container enables dropping.
private function dragEnterHandler(event:DragEvent):void
{
    if (!event.dragSource.hasFormat("items"))
        return;

    var dropTarget:Box = Box(event.currentTarget);
    dropTarget.setStyle("borderStyle", "outset");

    DragManager.acceptDragDrop(dropTarget);
    DragManager.showFeedback(DragManager.MOVE);
}

private function dragExitHandler(event:DragEvent):void
{
    if (!event.dragSource.hasFormat("items"))
        return;

    var dropTarget:Box = Box(event.currentTarget);
    dropTarget.setStyle("borderStyle", "inset");
}

MXML

<mx:HBox id="invoiceHBox" borderStyle="inset" borderThickness="3"
    height="40" width="260" 
    dragEnter="{dragEnterHandler(event);}"
    dragExit="{dragExitHandler(event);}"
    dragDrop="{dragDropHandler(event);}">
    <mx:VBox>
        <mx:Image source="{MailIcon32}" visible="{Boolean(invoiceEmail)}" />
        <mx:Label text="{invoiceEmail.name}" styleName="heading4" />
        <mx:Text text="{invoiceEmail.description}"
            width="100%" selectable="false" />
    </mx:VBox>
</mx:HBox>

When the mouse enters the HBox, it works fine. The data can be dropped into the HBox and the function dragDropHandler (a very long function) does its work.

However, when the mouse hovers over the VBox, the drop functionality is lost. Can the VBox container somehow inherit from the HBox? or is there another solution to this problem?

thanks!

Answer 1

You need to disable the mouseChildren property of the HBox and it should work

<mx:HBox id="invoiceHBox" borderStyle="inset" borderThickness="3"
    height="40" width="260" 
    dragEnter="{dragEnterHandler(event);}"
    dragExit="{dragExitHandler(event);}"
    dragDrop="{dragDropHandler(event);}"
    mouseChildren="false" >
    <mx:VBox>
        <mx:Image source="{MailIcon32}" visible="{Boolean(invoiceEmail)}" />
        <mx:Label text="{invoiceEmail.name}" styleName="heading4" />
        <mx:Text text="{invoiceEmail.description}"
            width="100%" selectable="false" />
    </mx:VBox>
</mx:HBox>