Flex titledborderbox drag and drop disable dragging children of titledborderbox

Question

So I have this titledborderbox in flex 4 with custom skin, I am working on drag and drop application and I have run into some problems.

1. When I initiate drag and drop on that component I am able to drag it's children but not the titledborderbox itself, for example: I can grab the label, or button which is inside this box and I can start dragging it but that is not a desired functionality. I should be able to click anywhere on the titledborderbox and drag the whole component with it's children to the new position. I have tried the mouseChildren = false but that disables the events on the children which is not good as some of the children are buttons with which I have to be able to interact anyway. Is there any workaround this problem, how could that be solved?

2. My titledborderbox containers are in HGroup, I would like to be able to drop the titledborderbox at specific position, for example: if I have 4 titledborderbox containers and I start dragging the last one then I would like to be able to place it at the position 1 in the HGroup container but drag manager always places the dropped item as the last item in the group, is there any solution to that?

I have to use this layout and I can't change to other layout, I can't find any decent example of what I am trying to achieve, is that even possible? Any help appreciated, thank you. Here is my code for dragging:

private function handleStartDrag( evt:MouseEvent ):void
            {

                // grab the item renderer and relevant data
                var dragItem:IUIComponent = evt.target as IUIComponent;
                var dragSource:DragSource = new DragSource();                               

                dragSource.addData( dragItem, "item" );
                DragManager.doDrag( dragItem, dragSource, evt );
                this.buttonMode = true;

            }

            protected function handleDragEnter( evt:DragEvent ):void
            {
                if( evt.dragSource.hasFormat( "item" ) )
                    DragManager.acceptDragDrop( evt.target as IUIComponent );

            }

            protected function handleDragDrop( evt:DragEvent ):void
            {
                var dragItem:Object = evt.dragSource.dataForFormat( "item" );
                var dragItemOwner:Group = ( dragItem.owner as   Group );
                dragItemOwner.removeElement( dragItem as IVisualElement );
                var targetOwner:Group = ( evt.target as Group );
                targetOwner.addElement( dragItem as IVisualElement );
            }

Answer 1

Try changing

DragManager.acceptDragDrop( evt.target as IUIComponent );

to

DragManager.acceptDragDrop( evt.currentTarget as IUIComponent );

event.target is the reference to the object with "caused" the event (maybe an image or textfield within you box). event.currentTarget is the reference to the object which binds the event listener (your box).

Another option could be to set the mouseChildren-property of your box to false so that they do not fire MouseEvents. But this is only useful if those children should NEVER fire a MouseEvent.