Monday, May 7, 2007

Dragging and dropping but what about the Z-INDEX ?

I don't know whether you know but dragging components around the screen is sooo easy in Flex. The code below works within an MXML component. If you want it to work in an MXML application then you should replace 'this' by the actual component name.

mouseDown="this.startDrag(); " mouseUp=" this.stopDrag();"

Question is: how to make the component being dragged the top component (make it appear above all other components) ? After some searching I found the following solution:

mouseDown="this.parent.setChildIndex(this,this.parent.numChildren-1); this.startDrag(); " mouseUp=" this.stopDrag();"

3 comments:

m.e.r.C.u.r.y said...

even i am also searching how to bring front or send to back the containers!

Noj said...

in flex 3 there is a beautiful function call swapChildren(child1, child2);

which will swap the depths

yanli said...

Just to contribute my code for mouse down event.

// Note oh is object, I solve this code for Rouge-Development's ObjectHandler
oh.addEventListener(MouseEvent.MOUSE_DOWN, bringToFront);

private function bringToFront(evt:MouseEvent): void {
evt.target.parent.setChildIndex(evt.target,evt.target.parent.numChildren-1);
asd.text = evt.target.id;
}